1つの要素を展開してノックアウトjs内の他の要素をすべて折りたたむjs

Question

ノックアウトでは、開いている他のすべての行を折りたたんで、クリックした行だけを展開することができます。

私はこれをFiddle exampleといいます。

ビュー -

<ul data-bind="foreach: items"> <a href="#" data-bind="click: toggle, text:linkLabel"></a> 
    <button data-bind="text:name"></button> 
    <div data-bind="visible:expanded"> 
     <input data-bind="value:name"></input> 
    </div> 
</ul> 

ビューモデル - ここ

function Sample(item) { 
    var self = this; 
    self.name = ko.observable(item.name); 
    self.id = ko.observable(item.id); 
    self.expanded = ko.observable(false); 
    self.toggle = function (item) { 
     self.expanded(!self.expanded()); 
    }; 
    self.linkLabel = ko.computed(function() { 
     return self.expanded() ? "collapse" : "expand"; 
    }, self); 
} 

var viewModel = function() { 
    var self = this; 

    var json = [{ 
     "name": "bruce", 
     "id": 1 
    }, { 
     "name": "greg", 
     "id": 2 
    }] 

    var data = ko.utils.arrayMap(json, function (item) { 
     return new Sample(item); // making things independent here 
    }); 
    self.items = ko.observableArray(data); 
}; 

ko.applyBindings(new viewModel()); 

その崩壊しない既に開いて行。トグル機能で完全な項目を取得しようとしましたが、機能しませんでした。

私はノックアウトするのは新しいです。提案してください。

アップデート -

私は、デフォルトで拡張最初のものにするために、このコードを試してみました - 予想通り

var index=0; 
var data = ko.utils.arrayMap(json, function(item) { 
     if(index++===0){ 
     return new Sample(item,true); 
    }else{ 
     return new Sample(item,false); 
    } 
    }); 

しかし、与えられたコード上では動作しません。

Answer 1

これはノックアウトで作業しているときに非常によくある「問題」です。あなたは、私は通常、3つのオプションのいずれかの選択...彼らの行動はまだ任意の兄弟の行動に影響を与えるかもしれないが、独立して自分のSampleインスタンスを維持したい：

• 移動親のviewmodelに兄弟に影響を与える機能を。データバインドで

  var viewModel = function() { 
      /* ... */ 
      self.toggle = function(sample) { 
      self.items().forEach(function(candidateSample) { 
       candidateSample.expanded(sample === candidateSample); 
      }); 
      } 
  }; 
  

  ：たとえば

  <a data-bind="click: $parent.toggle"></a> 
  

  は個人的に、私は、このオプションを指定していいと思います。ここでは、あなたのフィドルに実装されています：

  self.items = ko.observableArray(); 
  
  var data = ko.utils.arrayMap(json, function (item) { 
      return new Sample(item, self.items); 
  }); 
  
  self.items(data); 
  

  そしてSample中：各項目へhttp://jsfiddle.net/cxzLsz56/

• パス兄弟

  function Sample(item, siblings) { 
      self.toggle = function() { 
      siblings().forEach(/* collapse */); 
      self.expanded(true); // Expand 
      }; 
  }; 
  

• を郵便ポスト/ eventhub /メディエーターメカニズムのいくつかの並べ替えを作成して作りますSampleがイベントをトリガーします。各Sampleはこのイベントをリッスンし、別のSampleがトリガーすると折りたたまれます。