多個嵌套的JQuery UI手風琴不綁定正確

Question

我試圖讓一個多嵌套的手風琴控制與淘汰賽的工作，但將通過面板KO綁定創建的項目時，不要用手風琴爲新的綁定面板。

的代碼看起來是這樣的：

---

<div data-bind="accordion: {collapsible: true, active: false, heightStyle: 'content'}, template: { name: 'queryTemplate', foreach: children }"> 
</div> 

<script id="queryTemplate" type="text/html"> 
    <h3> 
     <div> 
      <a href="#" data-bind="text: id"></a>&nbsp; 
      <span data-bind="text: name"></span>&nbsp; 
      <button data-bind="click: addNext">Add Next Item</button> 
     </div> 
    </h3> 
    <div > 
     <input data-bind="value: name"></input> 
     <input data-bind="value: id"></input> 
     <button data-bind="click: addSubitem">Add SubItem</button> 
     <hr/> 
     <div data-bind="accordion: {collapsible: true, active: false, heightStyle: 'content'}, template: { name: 'queryTemplate', foreach: children }"> 
     </div> 
    </div> 
</script> 

<script> 
ko.bindingHandlers.accordion = { 
    init: function(element, valueAccessor) { 
     var options = valueAccessor() || {}; 
     setTimeout(function() { 
      $(element).accordion(options); 
     }, 0); 

     //handle disposal (if KO removes by the template binding) 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function(){ 
      $(element).accordion("destroy"); 
     }); 
    }, 
    update: function(element, valueAccessor) { 
     var options = valueAccessor() || {}, 
      existing = $(element).data("accordion"); 
     //if it has been reinitialized and our model data changed, then need to recreate until they have a "refresh" method 
     if (existing) { 
      $(element).accordion("destroy").accordion(options); 
      //$(element).accordion("refresh"); 
     } 

    } 
}; 

function Item(id, name, parent) { 
    var self = this; 
    this.id = ko.observable(id); 
    this.name = ko.observable(name); 
    this.children = ko.observableArray(); 
    this.addSubitem = function(){ 
     self.children.push(new Item(self.children().length + 1, "", this)); 
    } 
    this.parent = ko.observable(parent); 
    this.addNext = function(){parent.addSubitem()}; 
} 

var model = new Item(0, "Top"); 
var tmp = new Item(1, "First", model); 
tmp.children.push(new Item(0, "SubItem!", tmp)); 
model.children.push(tmp); 
tmp = new Item(2, "Second", model); 
tmp.children.push(new Item(0, "SubItem!", tmp)); 
model.children.push(tmp); 

ko.applyBindings(model); 

</script> 

---

我的印象中它可能是我如何建立模板環到期，但我在我的智慧與結束這一點 - 謝謝你，任何人都

注：

我會盡力澄清我有問題 - （這裏的一對小提琴：http://jsfiddle.net/QChon/aUJFg/4/）

正確加載手風琴和嵌套手風琴，遵循視圖模型（包含再次包含Item對象的「children」數組，該對象應無限期地繼續）。

「添加下一個項目」按鈕爲當前項目，因此添加到當前手風琴面板的同胞，並且「添加子項目」向當前項目的子項添加子項，因此在子項目下添加一個嵌套的accordeon面板當前面板。

問題是，當我點擊按鈕，正確的HTML元素被添加到正確的地方（即作爲標題和內容面板），但jQuery的類和標識符沒有綁定到創建的HTML控件，因此作爲手風琴結構的一部分，不要呈現或行爲正確。希望有所澄清。

Answer 1

的問題是在你的自定義綁定功能

要檢查，如果當前元素是通過查看數據手風琴屬性，它甚至沒有一個正確初始化手風琴存在的手風琴。其次，即使它發現該屬性，它也會嘗試在錯誤的層面上「重建」手風琴。容器類手風琴的是父親的父親，相對於您在更新方法得到的元素。

所以，如果你從這個

var existing = $(element).data("accordion"); 
if (existing) $(element).accordion("destroy").accordion(options); 

更改功能，這

var existing = $(element).parent().parent().hasClass("ui-accordion"); 
if (existing) $(element).parent().parent().accordion('refresh'); 

預期它應該工作。

http://jsfiddle.net/M9222/1/