如何通过使用Knockout.js在数组中绑定子数组？

Question

I'm using Knockout to bind data to a table:

I have 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 (to bind data):

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

But it only displays the product name and does not bind "tag" obj; I want Knockout to bind data as:

    Product Name                        Tag
1   Laptop                              promotion
                                        blackfriday

2   Samsung galaxy note III             samsung
                                        galaxy

Answer 1

based on the code you gave, there are a couple simple things that will fix this for you:

1. productName is misspelled
2. the foreach:obj.tag should be foreach:tag
3. the text:tag should be text:$data (see the docs on this )
4. your tags in the data given are not strings - so it won't work if they aren't defined elsewhere

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. The implementation that are you using is too odd, and I think is not correct. For example I don't know why are you retrieving the listProduct element and sending as argument to ko.applyBidning , this is not how knockout works.

2. You also have mistakes using inside object in the foreach binding, check out documentation to see the correct usage. Even you have a misspelled in the HTML with the productName value.

3. You have syntax errors inside both tag arrays, the values are string so you need to add quotes to each element.

I will show a better and clean way to do it fixing the issues mentioned above:

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>

Check out this fiddle to see it working.