ネストされたアコーディオン - 子をクリックすると、親を開いたままにする方法

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を変更することにより、N-レベルこの作業を行うことができるはずです。 http://knockoutjs.com/documentation/template-binding.html

私はこれが助けてくれることを願っています！

Jason