数据绑定:{foreach: ...} 用于多个数组 [英] Data-bind: {foreach: ...} for multiple arrays

问题描述

是否可以将 data-bind: foreach 用于多个数组?
例如:

//做东西

如果可能，它的正确语法是什么?或者这样做的正确方法是什么(除了合并两个数组)?

解决方案

我不认为有任何官方的方法可以这样做，但一种解决方法是，将 $index 与foreach 在较长的数组上.像这样:

var model = function() {var self = this;self.arr1 = ko.observableArray([1,2,3,5,6]);self.arr2 = ko.observableArray([1,2,3,4]);}ko.applyBindings(new model());

span {字体粗细:粗体；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script><br/><div data-bind="foreach: (arr1().length > arr2().length ? arr1 : arr2)">指数:<span data-bind="text: $index"></span>,数组 1:<span data-bind="text: $root.arr1()[$index()]"></span>,数组 2:<span data-bind="text: $root.arr2()[$index()]"></span>,更长的数组:<span data-bind="text: $data"></span>,较短的数组:<span data-bind="text: ($root.arr1().length < $root.arr2().length ? $root.arr1()[$index()] : $root.arr2()[$index()])"></span><br/>

Is it possible to use data-bind: foreach for more than one array?
For example:

<div data-bind="foreach: arrayone, arraytwo">
   //do stuff
</div>

If it's possible, what is the correct syntax for it ? Or what is the correct way of doing this (besides merging the two arrays) ?

解决方案

I don't think there is any official way of doing so, but a workaround would be, to use $index along with foreach on the longer array. Something like this:

var model = function() {
  var self = this;
  
  self.arr1 = ko.observableArray([1,2,3, 5, 6]);
  self.arr2 = ko.observableArray([1,2,3,4]);
  
}

ko.applyBindings(new model());

span {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<br/>

<div data-bind="foreach: (arr1().length > arr2().length ? arr1 : arr2)">
  Index: 
  <span data-bind="text: $index"></span>,
  
  Array 1: 
  <span data-bind="text: $root.arr1()[$index()]"></span>,
  Array 2: 
  <span data-bind="text: $root.arr2()[$index()]"></span>,
  Longer array: 
  <span data-bind="text: $data"></span>,
  Shorter array: 
  <span data-bind="text: ($root.arr1().length < $root.arr2().length ? $root.arr1()[$index()] : $root.arr2()[$index()])"></span>
  <br/>
</div>

这篇关于数据绑定:{foreach: ...} 用于多个数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！