Multiple nested JQuery UI Accordion generated through Knockout template does not bind correctly -

i'm trying multiple-nested accordion control work knockout when adding panels items created through ko bindings not bind accordion new panels.

the code looks this:

---

<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 template binding)         ko.utils.domnodedisposal.adddisposecallback(element, function(){             $(element).accordion("destroy");         });     },     update: function(element, valueaccessor) {         var options = valueaccessor() || {},             existing = $(element).data("accordion");         //if has been reinitialized , our model data changed, need recreate until have "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> 

---

i have impression may due how i'm building template loop, i'm @ wits end - thank you, anyone

note:

i'll try clarify problem i'm having - (here's on fiddle: http://jsfiddle.net/qchon/aujfg/4/)

the accordion , nested accordions load correctly, following view model (item "children" array containing again item objects, should go on indefinitely).

the "add next item" button adds sibling current item, , hence current accordion panel, , "add subitem" adds child current item's children, , hence nested accordeon panel under current panel.

the problem when click buttons, correct html elements added @ correct places (i.e., header , content panel) jquery classes , ids not bound created html controls, hence not render nor behave correctly part of accordion structure. hope clarifies somewhat.

the problem in custom bindings function

you checking if current element accordion looking data-accordion attribute, not exist on initialized accordion. secondly if finds attribute try 'recreate' accordion on wrong level. container class of accordion parent's parent, relative element in update method.

so if change function this

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

to this

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

it should work expected.

http://jsfiddle.net/m9222/1/