通过Knockout模板生成的多个嵌套JQuery UI Accordion无法正确绑定

我正在尝试使用多重嵌套的手风琴控件来使用Knockout，但在添加面板时，通过KO绑定创建的项目不会与手风琴作为新面板绑定。

代码如下所示：

---

 
  
 
     Add Next Item 
 
 
   Add SubItem 
 
 
 
   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);  

---

我的印象可能是由于我是如何构建模板循环的，但是我的智慧结束了 – 谢谢你，任何人

注意：

我会试着澄清我遇到的问题 – （这里是小提琴： http ： //jsfiddle.net/QChon/aUJFg/4/ ）

手风琴和嵌套手风琴在视图模型之后正确加载（具有“children”数组的Item，其中包含Item对象，它应该无限期地继续）。

“添加下一个项目”按钮将一个兄弟添加到当前项目，因此添加到当前的折叠面板，“添加子项目”将一个子项添加到当前项目的子项，因此在当前面板下添加一个嵌套的accordeon面板。

问题是当我单击按钮时，正确的html元素被添加到正确的位置（即，作为标题和内容面板），但jquery类和id不绑定到创建的html控件，因此不呈现也不表现正确，作为手风琴结构的一部分。 希望有所澄清。

Answer 1

问题出在您的自定义绑定function中

您正在通过查看data-accordion属性来检查当前元素是否是手风琴，即使在正确初始化的手风琴上也不存在。 其次，即使它发现该属性，它也会尝试在错误的级别上“重新创建”手风琴。 手风琴的容器类是父级的父级，相对于您在update方法中获得的元素。

所以，如果你改变你的function

 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/