如何使用敲除映射插件添加新项目

Question

我正在尝试一个敲除映射示例，我想我已经差不多了。我似乎无法在视图Model.foos中添加新的Foo-有人能看到我在这里错过了什么吗？

var Foo = function (data) {
    var self = this;
    self.id = data.id;
    self.Name = ko.observable(data.Name);
}
var dataMappingOptions = {
    key: function(data) {
        return data.id;        
    },
    create: function (options) {
        return new Foo(options.data);
    }
};

var viewModel = {
    foos: ko.mapping.fromJS([]),
    loadInitialData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
    },
    loadUpdatedData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
    }
};
viewModel.addFoo = function () {
    viewModel.foos.push(ko.mapping.fromJS(new Foo()));
    viewModel.loadUpdatedData();
}

    <ul data-bind="template: {name: 'TopTemplate'}"></ul>
<script type="text/html" id="TopTemplate">
    <li><span>Result</span>
        <ul data-bind=" template: {name:  'FooTemplate' , foreach: foos} " style="list-style-type:circle;margin-left:15px">
        </ul>
    </li>
    <button data-bind='click: addFoo'>Add Foo</button>
</script>       
<script type="text/html" id="FooTemplate">     
    <li><span data-bind='text: Name'></span>
    </li>
</script>

Answer 1

由于原始海报在Foo类成员内部应用了可观察性，因此无需对其应用ko.mapping.fromJS。然而，我发现，当您有一个"原始"json对象（没有映射）需要添加到可观察数组中时（即，您以前应用了ko.mappig.fromJS（）），您实际上需要执行ko.mappiing.fromJS，例如

myArray.push(ko.mapping.fromJS(myNewRawJsonItem));  

否则，您的模板绑定（如果有）将抱怨"TypeErrorxxxx不是函数"。

Answer 2

您可以直接将一个新的Foo推送到您的observableArray。

下面是一个加载一些初始数据，然后加载一些更新数据的示例，以及在客户端添加新项目的按钮。http://jsfiddle.net/rniemeyer/wRwc4/

var viewModel = {
    foos: ko.mapping.fromJS([]),
    loadInitialData: function() {
        ko.mapping.fromJS(initialData, dataMappingOptions, viewModel.foos);
    },
    loadUpdatedData: function() {
        ko.mapping.fromJS(updatedData, viewModel.foos);
    }
};
viewModel.addFoo = function() {
    viewModel.foos.push(new Foo({ id: 0, Name: "New" }));
};