Question

我在HTML文件中有以下代码段 JQuery ：

$.getJSON("/events/", function (data) {
    viewModel = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);
});

例如，当用户按下按钮并返回JSON时执行代码：

{"Events":[{"Name":"Event1"},{"Name":"Event2"},{"Name":"Event3"}]}

此结果（使用 KnockoutJS ）链接到：

<ul data-bind="foreach: Events">
    <li><span data-bind="text: Name"></span></li>
</ul>

第一次致电到$.GetJSON，一切正常。我得到了我想要的东西，即（浏览器输出）：

事件1
事件2
EVENT3

但是在随后的“$。GetJSON”调用中，我在 Firebug 中收到以下错误：

NotFoundError: Node was not found.

containerNode.insertBefore(nodeToInsert, insertAfterNode.nextSibling);

我没有列表项目。

我可能做错了什么？

非常感谢你。

Answer 1

我的朋友Thomas Brattli找到了解决方案：

<ul data-bind="template: { name: 'template', foreach: Events }"></ul>

<script id="template" type="text/html">
    <li><span data-bind="text: Name"></span></li>
</script>

谢谢！

Answer 2

Knockout的重点是处理视图和视图模型之间的交互。在这种情况下，您尝试更新事件列表以响应按钮单击。按钮单击应链接到视图模型中的函数，而列表应链接到单击按钮时更新的可观察数组。我把它放在一个小提琴中：http://jsfiddle.net/mbest/uZb3e/，重要部分如下：

<button type=button data-bind="click: updateEvents">Update</button>
<ul data-bind="foreach: data.Events">
    <li><span data-bind="text: Name"></span></li>
</ul>

使用Javascript：

var viewModel = {
    data: ko.mapping.fromJS({"Events":[]}),
    updateEvents: function() {
        var self = this;
        $.getJSON("/events/", function (data) {
            ko.mapping.fromJS(newData, self.data);
        });
    }
};

ko.applyBindings(viewModel);

映射：foreach绑定工作仅在第一次

2 个答案: