添加到可观察数组时,Knockout模板不会更新列表

Question

我有一个淘汰模板:

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

我用foreach选项调用它:

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

我从我的控制器获取视图模型并使用以下Javascript来绑定它:

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

我从我的控制器返回一些项目,一切都很好.

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

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,您将访问基础数组,并直接将值推入其中.淘汰赛没有看到这种变化.相反,.push直接打电话给observableArray:

viewModel.MyObservableArray.push(itemToAdd);

这是一个淘汰方法,它将更新底层数组并通知任何订阅者更改,并将导致UI更新.

或者,你可以保留它,但是告知敲门它已经改变了,这将触发更新:

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