Question

在淘汰赛中，可以折叠所有其他已打开的行并展开仅点击的行。

查看

<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

当您使用淘汰赛时，这是非常常见的“问题”。您希望保持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
  };
};

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

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

1 个答案: