如何通過使用Knockout.js在數組中綁定子數組？

Question

我正在使用Knockout將數據綁定到表：

我有obj ：

obj=[{id:"1",productName:"laptop",tag:[promotion,blackfriday]},{id:"2",productName:"Samsung galaxy note III",tag:[samsung,galaxy]}]

HTML：

<table data-bind="foreach:list" id="listProduct">
  <tr>
      <td data-bind="text:productName"></td>
      <td data-bind="foreach:obj.tag">
          <p data-bind="text:tag"></p>
      </td>
  </tr>
</table>

JavaScript （綁定數據）：

ko.applyBindings({ list: obj }, document.getElementById('listProduct'));

但是它僅顯示產品名稱，並且不綁定“標簽” obj。 我希望淘汰賽將數據綁定為：

    Product Name                        Tag
1   Laptop                              promotion
                                        blackfriday

2   Samsung galaxy note III             samsung
                                        galaxy

Answer 1

根據您提供的代碼，有一些簡單的方法可以為您解決此問題：

1. productName拼寫錯誤
2. foreach:obj.tag應該是foreach:tag
3. text:tag應該是text:$data （請參閱此文檔 ）
4. 您給定數據中的標記不是字符串-因此，如果未在其他位置定義它們，則將無法使用

JS：

var obj = [{
    id: "1",
    productName: "laptop",
    tag: ["promotion", "blackfriday"]
}, {
    id: "2",
    productName: "Samsung galaxy note III",
    tag: ["samsung", "galaxy"]
}];

ko.applyBindings({ list: obj }, document.getElementById('listProduct'));

HTML：

<table  id="listProduct">
  <tr data-bind="foreach:list">
    <td data-bind="text:productName">test</td>
    <td data-bind="foreach:tag">
      <p data-bind="text:$data">test</p>
    </td>
  </tr>
</table>

Answer 2

1. 您使用的實現太奇怪了，我認為這是不正確的。 例如，我不知道您為什么要檢索listProduct元素並將其作為參數發送給ko.applyBidning ，這不是敲除的工作方式。

2. 您還可能在foreach綁定中使用內部對象時出錯，請查閱文檔以查看正確用法。 即使您在HTML中使用productName值拼寫錯誤。

3. 兩個tag數組中都存在語法錯誤，值是字符串，因此需要在每個元素上加上引號。

我將展示一種更好，更干凈的方法來解決上述問題：

JS

function VM(){ //declare your VM constructor.
  this.list = ko.observableArray([
      {id: '1', productName: 'laptop', tag: ['promotion', 'blackfriday']},
      {id: '2', productName: 'Samsung galaxy note III', tag: ['samsung', 'galaxy']}
    ]); //Add and observable array an set your data. If you don't need that this array be an observable just use a normal JS array.
}

ko.applyBindings(new VM()); //apply binding

HTML

<table data-bind="foreach: list">
<tr>
    <td data-bind="text: productName"></td>
    <td data-bind="foreach: tag">
      <p data-bind="text: $data"></p>
    </td>
</tr>
</table>

查看這個小提琴 ，看看它是否有效。