我有这个简单的ViewModel:
export class ViewModel {
public arr : KnockoutObservableArray<Dtos>;
constructor() {
this.arr = ko.observableArray<Dtos>(null);
ko.applyBindings(this);
this.init();
}
private init() {
var self = this;
ajaxCall().done(item => {
self.arr(item.Dtos);
});
}
public initPlugins() {
jQuery(".external-events > li")
.each(function() {
if ($(this).attr("event-draggable") == "false")
return true;
jQuery(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
}
}
此虚拟机已应用于此标记:
<ul class="external-events" data-bind="foreach: {arr, afterRender: initPlugins($data)}">
<li event-draggable="false">
<div class="bg-info">
<span data-bind="text: Name"></span>
</div>
<ul class="external-events" data-bind="foreach: moreStuff">
<li>
<div class="bg-info">
<span data-bind="text: Name"></span>
</div>
</li>
</ul>
</li>
</ul>
问题在于,
afterRender
绑定的foreach
事件仅被触发一次,显然是在ko.applyBindings
之后,但是DOM还没有准备好,因此我们无法初始化jQuery.ui
可拖动对象。根据Ko文档,每次
afterRender
(属于相应的foreach)更改时,均应触发observableArray
,但不会发生。最终,在填充数组之后,我通过在
ajax.done
中初始化可拖动对象使它起作用,但是我觉得这不是正确的方法,尽管如此,问题仍然存在,afterRender
在数组更新时不触发。任何想法将不胜感激。
PS:按数组我显然是指
ko.observableArray
最佳答案
问题出在你
foreach: {arr, afterRender: initPlugins($data)}
afterRender
需要一个函数作为参数,但是您正在通过使用数据作为参数来调用该函数,将其更改为:foreach: {arr, afterRender: initPlugins }
敲除将使用2个参数调用
afterRender
方法:插入的DOM元素的数组,将它们绑定到的数据项