cách thêm mục mới bằng cách sử dụng plugin bản đồ loại bỏ

Question

Tôi đang thử một mẫu bản đồ loại bỏ và nghĩ rằng tôi gần như ở đó. Tôi dường như không thể thêm một Foo mới vào viewModel.foos - bất cứ ai có thể nhìn thấy những gì tôi đã bỏ lỡ ở đây?

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

Bạn chỉ có thể đẩy Foo mới vào ObservableArray trực tiếp.

Đây là mẫu tải một số dữ liệu ban đầu và sau đó tải một số dữ liệu cập nhật cùng với nút để thêm các mục mới ở phía máy khách. 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" })); 
}; 

Answer 2

Kể từ khi các poster ban đầu được áp dụng quan sát bên trong các thành viên lớp Foo không cần phải áp dụng ko.mapping.fromJS với nó. Tuy nhiên tôi đã thấy rằng khi bạn có một đối tượng json 'thô' (không có ánh xạ) mà bạn cần phải thêm vào một mảng có thể quan sát được (tức là trước đó bạn đã áp dụng ko.mapping.fromJS()), bạn thực sự cần phải thực hiện ko.mapping.fromJS ví dụ

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

Nếu không, mẫu của bạn ràng buộc (nếu bạn có) sẽ khiếu nại rằng "TypeError xxxx không phải là chức năng".