javascript - 将项目添加到 ObservableArray() 并等待添加？

Question

我有一个具有以下功能的虚拟机:

var myArray = ko.observableArray(),
....
addItem = function(data) {
    myArray.unshift(data);
},

在我的 View 中，我有一些绑定(bind)到它的 HTML:

   <div data-bind="foreach: myArray">
   ....<label data-bind:="attr: { id: 'myLabel_' + name }"></Label>
   </div>

一切都很好 - 当我调用 addItem 函数时，一个项目会添加到我的 oberableArray() 中，并且 Knockout 会添加适当的 HTML。

我现在面临的问题是，我尝试使用更复杂的控件(例如 Kendo 网格)，而不是仅使用纯 HTML。当我调用 newItem 时，我需要调用 Javascript 方法来启动 Grid。但如果我这样做，它就不起作用(我假设是因为当 Kendo 控件尝试做它需要做的事情时，Knockout 还没有“完成”它所做的事情)。

以下方法不起作用:

var myArray = ko.observableArray(),
....
addItem = function(data) {
    myArray.unshift(data);
    var test = $('#myLabel_nameOne');
    // Kendo specific code to setup test
},

如果我从控制台运行相同的 Kendo 特定代码 - 它效果很好。如果我使用 setInterval，那也可以。

我知道有一个“afterRender”，我可以连接到整个模板 - 但我只是想知道在将单个项目添加到该 observableArray 后 UI 何时完成。

“等到这个真正添加后，然后去做其他事情”的正确说法是什么？或者“添加这个，当 UI 准备好时，为我调用这个函数”？

Answer 1

我遇到过 Knockout 以外的框架的异步问题，通常通过使用 jQuery 和 Deferred() 对象编写包装器来解决这些问题。

阅读 Knockout 文档后，您可以直接使用订阅功能。

var myArray = ko.observableArray()
myArray.subscribe(function(data) {
  var test = $('#myLabel' + data.name);
  // Kendo specific code to setup test
});
  ....
addItem = function(data) {
  myArray.unshift(data);
},