在敲除模板中迭代 2 个数组

Question

在视图模型中，我有 2 个数组。说 arr1 和 arr2。我想在 html 模板中相应地迭代数组和渲染视图。

例如我想在 html.

中编写等效于以下 js 代码

for(var i = 0; i< arr1.length; i++){
 for(var j=0;j<arr2.length;j++){
   if(arr1[i] == 'x' && arr2[j] == 'y'){
     //render input field
   }
   if(arr1[i] == 'w' && arr2[j] == 'z'){
     //render checkbox
   }
 }
}

我想在下面达到同样的效果 html。

<div data-bind="foreach : arr1">
 <!-- ko foreach: arr2 -->

// conditions to be added here for rendering input field or checkbox
 <!-- /ko -->
</div>

如何给出在 html 中比较 arr1 和 arr2 值的条件，就像在 javascript 中所做的那样？

Answer 1

我认为你正在尝试这样做：

<div data-bind="foreach: { data: arr1, as: 'a' }">
  <!-- ko foreach: { data: $parent.arr2, as: 'b' } -->
    // You should be able to reference 'a' and 'b' here
  <!-- /ko -->
</div>

第一个foreach

的范围外需要引用$parent.

Answer 2

您可以在 knockoutjs 上使用 [if 绑定][1] 来获得与您的 javascript样本。

我创建了一个示例来说明如何使用嵌套的 *foreach 绑定和 if 绑定。

JS

var vm = {  
    array1 : ko.observableArray(['x', 'y', 'z']), 
    array2: ko.observableArray([1,2,3]) 
}; 
ko.applyBindings(vm);

HTML

<div data-bind="foreach: { data: array1, as: 'arr1' }">
  <!-- ko foreach: { data: $root.array2, as: 'arr2' } -->
    <label data-bind="text: arr1"></label>
    <div data-bind="if: arr2  == 1">
      <input type="text" data-bind="value: arr2" />
    </div>
    <div data-bind="if: arr2  == 2">
      <input type="checkbox" />
    </div>
    <div data-bind="if: arr2  == 3">
      <select></select>
    </div>    
  <!-- /ko -->
</div>

这里的工作示例：https://jsfiddle.net/6evL0n2c/3/

在敲除模板中迭代 2 个数组

Iterate 2 arrays in knockout template

html

javascript

jquery

knockout.js

knockout-3.0