javascript - 在 knockout js中展开一个元素并折叠所有其他元素

Question

在 knockout 中，可以折叠所有其他打开的行并仅展开单击的行。

我指的是这个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>

viewModel -

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

当您使用 knockout 时，这是非常常见的“问题”。您希望保持 Sample 实例独立，而它们的行为仍可能影响任何同级实例的行为...我通常选择以下三个选项之一:

• 将影响兄弟 View 模型的功能移至父 View 模型。例如:

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

  使用数据绑定(bind):

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

  就我个人而言，我会选择这个选项。这是在你的 fiddle 中实现的: 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);
  

  在示例中:

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

• 创建某种邮箱/eventhub/mediator 机制并使Sample 触发事件。每个 Sample 都会监听此事件，并在另一个 Sample 触发它时崩溃。