Question

我无法使用Knockout.js库显示产品项目。

HTML

<p>First product: <strong data-bind="text: products[0].description"></strong></p>

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

的JavaScript

<script type='text/javascript'>

            $(function () {

                var json = {
                    "products": [
                        { "id": 1, "description": "product A" },
                        { "id": 2, "description": "product B" },
                        { "id": 3, "description": "product C" }
                    ]
                }

                function viewModel() { 
                    this.products = json.products;
                }

                ko.applyBindings(new viewModel());

            });
</script>

我没有收到任何错误消息，但我只看到“第一个产品：”文字。我错过了什么？

Answer 1

我让它在下面的jsfiddle中工作： https://jsfiddle.net/3np0hqp7/2/

HTML：

<p>First product: <strong data-bind="text: products[0].description"></strong></p>

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

JS：

(function() {
var viewModel = { 
  products: [
    { id: 1, description: "product A" },
    { id: 2, description: "product B" },
    { id: 3, description: "product C" }
  ]
}

ko.applyBindings(viewModel);
}());

您在主函数末尾缺少括号()，表示该函数应该立即执行。此外，您可以为双向绑定创建observable。

如何遍历knockout viewmodel集合

1 个答案: