如何使用映射插件刷新 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);

然后 Knockout 不会使用新数据更新视图。希望这是一个微不足道的问题...？！

Answer 1

KnockoutJS Mapping 能够为项目指定密钥。这让 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>

请注意，在附加的 sn-p 中，第一项的 lastUpdated 值是如何在创建时分配的，但在更新时保持不变。这是因为映射器看到 ID 已经存在于 items 中并简单地更新了属性。但是，对于 id 为 3 的项目，会创建一个新模型。

Answer 2

所有淘汰赛投标都订阅了第一个创建的模型。您在每个 ajax 响应上重新创建绑定模型。您的问题似乎与此stackoverflow article 中讨论的类似。相同的可观察对象应该绑定到标记。

试试这个（也许你应该支持一个空模型绑定）：

// 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);