如何使用映射插件刷新挖空视图模型

How to Refresh Knockout ViewModel Using Mapping Plugin

本文关键字：视图 模型 刷新 何使用 映射 插件      更新时间：2023-09-26

我有以下挖空视图模型：

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 调用。

当第一次调用 View/ViewModel 时，ko.applyBindings填充没有问题。但是，如果我稍后通过 AJAX 从服务器中提取新数据，然后调用：

viewModel.addData(someNewAjaxData)

或

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

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

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 的物料，将创建一个新模型。

所有挖空围兜都订阅了第一个创建的模型。在每个 ajax 响应上重新创建绑定模型。您的问题似乎与此堆栈溢出文章中讨论的问题类似。相同的可视量应绑定到标记。

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

// 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);
相关文章：