Iterate 2 массива в шаблоне нокаута

Question

В модели viewmodel у меня есть 2 массива. скажем, arr1 и arr2. Я хочу, чтобы итерации и массивы и визуализировать вид соответственно в html-шаблоне.

например. Я хочу написать эквивалент следующего js-кода в html.

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> 

Как я могу дать условие для сравнения arr1 и arr2 значения в HTML, как это сделано в 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> 

$parent. необходимо ссылаться вне рамок первого Еогеасп

Answer 2

Вы можете использовать [если связывание] [1] на knockoutjs, чтобы получить тот же подход, который был применен на вашем javascript.

Я создал пример использования вложенных привязок * foreach и при привязке.

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/