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知道何时需要创建项目而不是更新。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在附加的代码段中，观察第一项的lastUpdated值在创建时的分配方式，但在更新时保持不变。这是因为映射器看到items中已存在ID，只是更新了属性。但是，对于id为3的项目，会创建一个新模型。

Answer 2

所有击倒的bibdings都订阅了第一个创建的模型。您在每个ajax响应上重新创建绑定模型。您的问题与此stackoverflow article中讨论的问题类似。应该将相同的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);

如何使用Mapping插件刷新Knockout ViewModel

2 个答案: