ここで問題を再現できました: 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 observable 配列を介して動的に追加/削除される一連のアイテムのアコーディオンを表示することです。
これが私が使用する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 ページを表示すると、「追加されたインライン」という項目が正常に表示され、折りたたんだり展開したりできます。しかし、「アイテムの追加」ボタンをクリックすると、新しいアイテムがアコーディオンに追加されますが、スタイリングはまったくありません。例えば：
上の画像では、最初のアイテムは正しくスタイル設定されていますが、残りのアイテムには jQuery UI スタイルが適用されていません。基本的に、動的に追加されるアイテムには、アコーディオン スタイルは適用されません。
私はこの質問を見ました
アコーディオン メニューを作成するための knockout.js と jQueryUI
質問に含まれているjsFiddleを使用してみましたが、コードが同じ結果にならない理由がわかりません。
他の誰かがこれを以前に経験していて、助けてくれることを願っています。
編集：
これをさらに調べたところ、問題はこれであることがわかりました。新しい項目を監視可能な配列に追加すると、カスタム ハンドラーのupdateメソッドが実行されません。したがって、アコーディオンの再描画は決して起こりません。
を呼び出さない理由がわかりupdateません。これは私の頭をやっているリアルです！:)
編集: ここで問題を再現できました: http://jsfiddle.net/NE6dm/