javascript - 添加到可观察数组时， knockout 模板不会更新列表

Question

我有一个 knockout 模板:

<script type="text/javascript" id="myList">        
  // template stuff here                   
</script>

我用 foreach 选项调用它:

<div data-bind="template: { name:'myList', foreach: ItemList }"></div>

我从我的 Controller 获取 View 模型并使用以下 Javascript 绑定(bind)它:

var viewModel = ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(Model));                                        
ko.applyBindings(viewModel, document.getElementById("contentsDetails"));

我从我的 Controller 返回了一些项目，一切都很好。

我的问题是，如果我添加到我的可观察数组

var itemToAdd = {
            Name:  ko.observable("name a"),
            Desc:  ko.observable("desc a")
 }

 viewModel.MyObservableArray().push(itemToAdd);

我已经使用以下方法检查了数组是否可观察:

 console.log(ko.isObservable(viewModel.MyObservableArray));

它不会通过将新项目添加到列表来更新 UI 模板。

我在这里做错了什么？

Answer 1

就是这一行:

viewModel.MyObservableArray().push(itemToAdd);

通过在 MyObservableArray 之后放置方括号，您可以访问底层 数组，并将值直接插入其中。 knockout 没有看到这种变化。相反，直接在 observableArray 上调用 .push:

viewModel.MyObservableArray.push(itemToAdd);

这是 knockout 中的一个方法，它将更新底层数组并通知任何订阅者更改，并导致 UI 被更新。

或者，您可以保留原样，但通知 knockout 它已更改，这将触发更新:

viewModel.MyObservableArray().push(itemToAdd);
viewModel.MyObservableArray.valueHasMutated();