展开一个元素并折叠所有其他元素在淘汰赛中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

当你使用淘汰赛时，这是非常常见的“问题”。你要保持你的Sample情况下独立的，而他们的行为可能仍然影响任何兄弟姐妹的行为......我一般挑三个选项之一：

• 此举影响兄弟姐妹父视图模型的功能。例如：

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

  随着数据绑定：

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

  就个人而言，我会用这个选项去。这是它在你的提琴实施：http://jsfiddle.net/cxzLsz56/

• 通兄弟姐妹各项目：

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

  而且在Sample：

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

• 建立某种形式的邮箱/ eventhub /调停机制，使一个Sample触发一个事件。每当Sample收听此事件并在另一个Sample触发时崩溃。