添加项目以淘汰视图模型，不更新视图

Posted 2023-03-27

【中文标题】添加项目以淘汰视图模型，不更新视图

【英文标题】：Adding item to knock out view model , is not updating the view

【发布时间】：2019-02-05 03:18:13

【问题描述】：

我有一个要绑定到查看列表项的 ViewModel。

var MyViewModel = function() 
    var self = this;

    self.addItems = function(vm) 
        vm.inventoryItems.push('New Item');
    
;

var myVM= new MyViewModel();
ko.applyBindings(myVM);

视图模型有一个名为inventoryItems 的属性（来自服务）。

我同意使用 ,

<ul data-bind="foreach:inventoryItems">
    <li>
        <input class="form-control" type="text" data-bind="value: $data" />
    </li>
</ul>
<div class="text-right">
    <a data-bind="click: $parent.addItems">+ Add more</a>
</div>

现在，集合中已经存在的项目 inventoryItems 正在渲染良好。

当我使用添加新项目时，我可以通过控制台看到正在添加的项目，但视图没有更新！

self.addItems = function(vm) 
            vm.inventoryItems.push('New Item');
        

【问题讨论】：

vm.inventoryItems 是 ko.observableArray 吗？

@JonathanTwite，我只是从服务中获取该数组。所以我想，它是不可观察的。我如何使它可观察？

“服务”是另一个视图模型吗？还是检索数据的普通对象？如果您想在inventoryItems 中显示项目，它们应该是您的 ViewModel 上的一个参数。 ViewModel 是您希望在屏幕上显示的数据和逻辑

【参考方案1】：

下面的代码 sn-p 将使您的 inventoryItems 可观察

    var MyViewModel = function () 
    var self = this;

    self.inventoryItems = ko.observableArray();

    self.addItems = function (vm) 
        vm.inventories.push('New Item');
        self.inventoryItems(vm.inventories);
      
  ;
var myVM = new MyViewModel();
ko.applyBindings(myVM);