如何使用映射插件刷新Knockout ViewModel

Question

我有以下Knockout ViewModel：

var EditorViewModel = function () {

    var self = this;

    self.addData = function (_data) {
        ko.mapping.fromJS(_data, {}, self);
    };
};

可以這樣使用：

var viewModel = new EditorViewModel();
viewModel.addData(model);
ko.applyBindings(viewModel);

有關信息， viewModel.addData()的數據來自AJAX調用。

第一次調用ko.applyBindings時，View / ViewModel不會出現任何問題。 但是，如果以后我通過AJAX從服務器提取新數據，然后調用以下任一方法：

viewModel.addData(someNewAjaxData)

要么

ko.mapping.fromJS(someNewAjaxData, {}, viewModel);

然后，淘汰賽不會使用新數據更新視圖。 希望這是一個小問題...？！

Answer 1

KnockoutJS映射可以為項目指定鍵。 這使KnockoutJS知道何時需要創建或更新項目。

 var ItemViewModel = function(d){ var self = this; self.id = ko.observable(d.id); self.text = ko.observable(d.text); // We assign it when the object's created to demonstrate the difference between an // update and a create. self.lastUpdated = ko.observable(new Date().toUTCString()); } var EditorViewModel = function(){ var self = this; self.items = ko.observableArray(); self.addData = function(d){ ko.mapping.fromJS(d, { 'items': { 'create': function(o){ return new ItemViewModel(o.data); }, 'key': function(i){ return ko.utils.unwrapObservable(i.id); } } }, self); console.info(self); } self.addMoreData = function(){ self.addData({ 'items': [ {id:1,text:'Foo'}, {id:3,text:'Bar'} ] }); } } var viewModel = new EditorViewModel(); viewModel.addData({ items:[ {id:1,text:'Hello'}, {id:2,text:'World'} ] }); ko.applyBindings(viewModel); 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Hello, world!</h3> </div> <ul class="list-group"> <!-- ko foreach:items --> <li class="list-group-item"> <span class="text-muted" data-bind="text:id"></span> <span data-bind="text:text"></span> <span class="text-danger pull-right" data-bind="text:lastUpdated"></span> </li> <!-- /ko --> <li class="list-group-item" data-bind="visible:!items().length"> <span class="text-muted">No items.</span> </li> </ul> <div class="panel-footer"> <a href="#" data-bind="click:addMoreData">Update</a> </div> </div> </div> </div> </div> 

在隨附的代碼段中，觀察創建第一項的lastUpdated值是如何分配的，但是在更新時將其保持不變。 這是因為映射器看到ID已存在於items並且只是更新了屬性。 但是，對於ID為3的商品，將創建一個新模型。

Answer 2

所有剔除出價都訂閱了第一個創建的模型。 您可以在每個ajax響應上重新創建綁定模型。 您的問題似乎與本stackoverflow文章中討論的問題相似。 相同的osbervable應該綁定到標記。

試試這個（也許你應該支持一個空的模型綁定）：

// in the start of app
var observableModel = ko.observable();
ko.applyBindings(observableModel);

// on every ajax call
var viewModel = new EditorViewModel();
viewModel.addData(model);
observableModel(viewModel);