嵌套式手风琴 - 点击孩子时如何保持父母开放

Question

我们尝试使用嵌套式手风琴构建数据驱动列表。在我们的第一个原型中，它运行良好，但我们对实现进行了严格的编码，并且有明显不同的手风琴。

现在，当我们动态地创建该负载时，它看起来像结构在那里，但我们不再有明显的手风琴，所以它们不能独立操作。有什么我们可以添加到自定义绑定，将使这项工作？或者我们可以设置一些其他属性以保持儿童手风琴的独立性。

这个例子只是巢2级深，但我们最终会需要支持4

下面是当前原型：http://jsfiddle.net/blunde/agjFn/

Answer 1

这里是一个的jsfiddle，我相信修复您遇到的问题。

http://jsfiddle.net/JasonMore/gbhfT/6/

视图

<div data-bind="foreach: items, accordion: {}"> 
    <h3> 
     <a href="#" data-bind="text: id"></a> 
    </h3> 
    <div>  
     <span data-bind="text: name"></span> 
     <div data-bind="foreach: items, accordion: {}"> 
      <h3> 
       <a href="#" data-bind="text: id"></a> 
      </h3> 
      <div data-bind="text: name"> 
      </div> 
     </div> 
     <button data-bind="click: add">Add Sub Item</button> 
    </div> 
</div> 
<button data-bind="click: add">Add Item</button> 
<hr/> 

的Javascript

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() || {}; 
     $(element).accordion("destroy").accordion(options); 
    } 
} 

function Item(id, name, subItems) { 
    var self = this; 

    //properties 
    this.id = ko.observable(id); 
    this.name = ko.observable(name); 
    this.items = ko.observableArray(subItems); 

    //actions 
    this.add = function() { 
     self.items.push(new Item(4, "bar")); 
    }; 
} 

var viewModel = { 
    items: ko.observableArray([ 
     new Item(1, "one", 
      [ 
      new Item(11, "one-one"), 
      new Item(12, "one-two") 
      ]), 
     new Item(2, "two", []), 
     new Item(3, "three", []) 
    ]), 

    add: function() { 
     viewModel.items.push(new Item(4, "foo")); 
    } 
}; 

ko.applyBindings(viewModel);​ 

你应该能够深刻的改变的foreach成模板，使这项工作正水平。 http://knockoutjs.com/documentation/template-binding.html

我希望这有助于！

杰森