我已经能够在这里复制问题：http: //jsfiddle.net/NE6dm/
我在应用程序中使用了以下 HTML：
<div data-bind="foreach: items, jqAccordion: { active: false, collapsible: true }">
<h3>
<a href="#" data-bind="text: title"></a>
</h3>
<div>
hello
</div>
</div>
<button title="Click to return to the complaints list." data-bind="click: addItem">Add Item</button>
这个想法是为一堆项目显示一个手风琴，这些项目将通过 Knockout 可观察数组动态添加/删除。
这是我使用的一些 JavaScript 代码：
// Tab.
var tab = function (questionSet) {
this.id = questionSet.code;
this.title = questionSet.description;
this.questionSet = questionSet;
};
自定义淘汰赛绑定处理程序：
ko.bindingHandlers.jqAccordion = {
init: function (element, valueAccessor) {
var options = valueAccessor();
$(element).accordion(options);
$(element).bind("valueChanged", function () {
ko.bindingHandlers.jqAccordion.update(element, valueAccessor);
});
},
update: function (element, valueAccessor) {
var options = valueAccessor();
$(element).accordion('destroy').accordion(options);
}
};
var NonSequentialViewModel = function () {
var items = ko.observableArray();
items.push(new tab({ id: 23, description : 'Added Inline' }));
var addItem = function() {
items.push(new tab({ id: 5, description: 'Added by a click' }));
};
return {
addItem: addItem,
items: items
}
}
var nonsequentialViewModel = new NonSequentialViewModel();
ko.applyBindings(nonsequentialViewModel);
现在的问题是——当我查看 HTML 页面时，“Added Inline”项看起来很好，因为我可以折叠和展开它。但是，当我单击“添加项目”按钮时，手风琴中添加了一个新项目，但它根本没有样式。例如：
在上图中，第一个项目的样式正确，但是其余项目没有应用任何 jQuery UI 样式。基本上，任何动态添加的项目都没有应用任何手风琴样式。
我看过这个问题
knockout.js 和 jQueryUI 创建手风琴菜单
我已经尝试使用问题中包含的 jsFiddle，但我不明白为什么我的代码没有相同的结果。
我希望其他人以前经历过这种情况并可以提供帮助。
编辑：
我进一步研究了这个问题，发现问题是这样的——当我向 oservable 数组添加一个新项目时，自定义处理程序的update方法没有执行。因此，手风琴的重绘永远不会发生。
我不明白为什么update不应该调用。这真是让我头疼！:)
编辑：我已经能够在这里复制问题：http: //jsfiddle.net/NE6dm/