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'));

但它只显示产品名称，不会绑定＆＃34;标记＆＃34; OBJ;我希望Knockout将数据绑定为：

    Product Name                        Tag
1   Laptop                              promotion
                                        blackfriday

2   Samsung galaxy note III             samsung
                                        galaxy

Answer 1

根据您提供的代码，有几个简单的方法可以解决这个问题：

productName拼写错误
foreach:obj.tag应为foreach:tag
text:tag应为text:$data（请参阅the docs on this）
您提供的数据中的标记不是字符串 - 如果它们未在其他地方定义，它就不会起作用

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

您使用的实现太奇怪了，我认为不正确。例如，我不知道你为什么要检索listProduct元素并将其作为参数发送给ko.applyBidning，这不是淘汰赛的工作方式。
在foreach绑定中使用内部对象也有错误，请查看documentation以查看正确的用法。即使您在HTML中拼错了productName值。
两个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>

请查看此fiddle以查看其是否有效。

如何使用Knockout.js绑定数组中的子数组？

2 个答案: