Knockout.js视图模型集合遍历及产品项显示问题排查

嘿，我来帮你搞定这两个Knockout.js的问题！

Knockout里遍历集合最常用的就是**foreach绑定**，不管你用的是普通数组还是Knockout特有的observableArray都能搞定，而且后者还能自动同步UI和数据变化，推荐优先用它。

举个实际例子：

• 先定义视图模型，把集合做成observableArray：

function ViewModel() {
  // 用observableArray包裹产品列表，支持自动更新
  this.products = ko.observableArray([
    { id: 1, description: "Product A" },
    { id: 2, description: "Product B" }
  ]);
}

// 别忘了启动Knockout绑定！
ko.applyBindings(new ViewModel());

• 然后在HTML里用foreach循环渲染：

<table>
  <tbody data-bind="foreach: products">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: description"></td>
    </tr>
  </tbody>
</table>

额外小技巧：如果想在循环里更清晰地引用当前项，可以给foreach加别名：

<tbody data-bind="foreach: { data: products, as: 'product' }">
  <tr>
    <td data-bind="text: product.id"></td>
    <td data-bind="text: product.description"></td>
  </tr>
</tbody>

看了你贴的代码，问题主要出在这几点：

1. 没有把数据转换成Knockout的可观察对象，也没创建正式的视图模型
2. 缺少ko.applyBindings()来启动绑定机制
3. HTML里的<tbody>没有包裹在<table>标签里，浏览器会渲染异常

给你修正后的完整代码：

修正后的HTML #

<p>First product: <strong data-bind="text: products()[0].description"></strong></p>
<!-- 给tbody加上父table标签 -->
<table>
  <tbody data-bind="foreach: products">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: description"></td>
    </tr>
  </tbody>
</table>

修正后的JavaScript #

<script type='text/javascript'>
$(function () {
  // 定义视图模型，把products转成observableArray
  function ViewModel() {
    this.products = ko.observableArray([
      { "id": 1, "description": "product A" },
      { "id": 2, "description": "product B" }
    ]);
  }

  // 启动Knockout绑定，让视图和模型关联起来
  ko.applyBindings(new ViewModel());
});
</script>

关键说明：

• 用observableArray代替普通数组：这样后续你添加/删除产品时，UI会自动刷新，不用手动操作DOM
• 访问observableArray的元素要加()：比如products()[0].description，因为observableArray本质是一个函数，调用它才能拿到内部的真实数组
• 必须调用ko.applyBindings()：这是Knockout生效的关键步骤，它会把视图模型和DOM绑定在一起

内容的提问来源于stack exchange，提问作者Muflix