Knockout.js fromJSON 不更新 ViewModel

Question

我正在处理以下简单案例：

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

<script id='namesTemplate' type='text/html'>
    {{each $data}}
        <li>${ Name }</li>
    {{/each}}
</script>

<span data-bind="click: fire">Click Me</span>

<script type='text/javascript'>

    var viewModel = ko.observableArray([{ "Name": "Tom" },
                                        { "Name": "Pete" },
                                        { "Name": "Dave"}]);

    viewModel.fire = function () {
        $.getJSON("Post", function (result) {
            viewModel = ko.mapping.fromJSON(result);
        });
    }

    ko.applyBindings(viewModel);

</script>

getJSON 正在从 ASP.NET MVC 控制器获取 JSON 数据，如下所示：

[{"Name":"Chris"}]

点击点击我后，未更新无序列表。我哪里错了？

谢谢。

Answer 1

两个想法：

1) 在视图模型上命名您的属性：

var viewModel = { employees: ko.observableArray([{ "Name": "Tom" },
                                                 { "Name": "Pete" },
                                                 { "Name": "Dave"}]);
};

2) 由于您的视图模型中已经有数据，也许您应该使用 ko.mapping.updateFromJS：

viewModel.fire = function () {
    $.getJSON("Post", function (result) {
        ko.mapping.updateFromJS(viewModel.employees, result);
    });
}

Answer 2

看看我的例子：

http://jsfiddle.net/YhXyL/

var viewModel ={
      names: ko.observableArray([{ "Name": "Tom" },
                                 { "Name": "Pete" },
                                 { "Name": "Dave"}])
};

viewModel.fire = function() {
    this.names([{"Name": "test"}]);
};

ko.applyBindings(viewModel);

还有HTML：

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

<span data-bind="click: fire">Click Me</span>

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

如果您想添加新数组，可以使用 push 方法：

this.names.push([{"Name": "test"}]);