Knockout.js 如何使用敲除映射插件添加新项

Knockout.js 如何使用敲除映射插件添加新项,knockout.js,knockout-mapping-plugin,Knockout.js,Knockout Mapping Plugin,我正在尝试一个敲除映射示例,我想我就快到了。我似乎无法向viewModel.foos添加新的Foo-有人能看到我在这里遗漏了什么吗 var Foo = function (data) { var self = this; self.id = data.id; self.Name = ko.observable(data.Name); } var dataMappingOptions = { key: function(data) { retu

我正在尝试一个敲除映射示例,我想我就快到了。我似乎无法向viewModel.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>
var Foo=函数(数据){
var self=这个;
self.id=data.id;
self.Name=ko.observable(data.Name);
}
var dataMappingOptions={
键:功能(数据){
返回data.id;
},
创建:函数(选项){
返回新的Foo(options.data);
}
};
var viewModel={
foos:ko.mapping.fromJS([]),和,
loadInitialData:函数(){
fromJS(serverData、dataMappingOptions、viewModel.foos);
},
LoadUpdateData:函数(){
fromJS(serverData、dataMappingOptions、viewModel.foos);
}
};
viewModel.addFoo=函数(){
viewModel.foos.push(ko.mapping.fromJS(newfoo());
viewModel.LoadUpdateData();
}
  • 结果
  • 添加Foo

  • 您可以直接将新的Foo推送到您的observableArray

    下面是一个加载一些初始数据的示例,然后加载一些更新的数据,以及在客户端添加新项目的按钮


    由于原始海报是在Foo类成员内部应用可观察对象,因此没有必要对其应用ko.mapping.fromJS。然而,我发现,当您有一个需要添加到可观察数组中的“原始”json对象(没有映射)时(即,您以前应用过ko.mapping.fromJS()),您实际上需要执行ko.mapping.fromJS,例如

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

    否则,您的模板绑定(如果有)会抱怨“TypeError xxxx不是一个函数”。

    非常感谢您的帮助(还有另一个问题:)。您是一个救命恩人。我想知道为什么它会抛出那个错误。非常感谢你。
    myArray.push(ko.mapping.fromJS(myNewRawJsonItem));