每个尝试在 for each 循环中操作单个元素的淘汰赛绑定答案

【问题标题】：knockout binding for each trying to manipulate single elements in the for each loop每个尝试在 for each 循环中操作单个元素的淘汰赛绑定
【发布时间】：2014-07-23 15:43:13
【问题描述】：

在 for each 绑定中，我将如何尝试切换单个 p 而不是 for each 绑定中的所有 P 元素，希望这不会太令人困惑:)

<div data-bind="foreach: items">

<p data-bind="click:somefunction" class="p1"> </P>

<p class="p2"> </p>

</div>

 var shellModel = {
  observables .....,
     somefunction: function() {

      ....here i need to toggle p2 (display on/off) not all though, only the one click on or rather the p below
     }
}

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

您可以将$index 传递给您的函数以了解点击了哪个并采取相应措施：

<p data-bind="click:somefunction($index)" class="p1"> </P>

self.someFunction = function(index){
    alert("Click on item number: " + index); 
};

【讨论】：

我刚刚添加了一个自定义绑定jsfiddle.net/rniemeyer/8KJD3，但您的方法更简洁，因为我不需要尝试从数组中查找 ID，非常好，谢谢戴安娜。

【解决方案2】：

如果更改可见性是您的视图的一部分，那么它应该是您的视图模型的一部分。

一旦你这样做了，事情就会自行到位。

function ItemViewModel() {
    var self = this;

    self.isExpanded = ko.observable(false);

    self.toggle = function () {
        self.isExpanded(!self.isExpanded());
    };
}

function MainVievModel() {
    var self.this;

    self.items = ko.observableArray([ /* instances of ItemViewModel*/]);
}

和

<div data-bind="foreach: items">
    <p data-bind="click: toggle" class="p1"> </p>
    <p data-bind="visible: isExpanded" class="p2"></p>
</div>

别再想了“我想切换第二个<p>”。想想“我想在展开状态和折叠状态之间切换项目。” 然后工作对其进行可视化表示，例如使用visual 绑定。

【讨论】：

Tomalak，我正在使用可见绑定，并且在应用程序中的其他地方使用过类似的东西，并且效果很好但是当有一个项目列表并且有很多 p2 时，我该如何使用可见绑定，因为它打开了所有 p2，附带问题 self.isExpanded(!self.isExpanded());只是颠倒了价值，很酷的方式，如果通常在那里，我会这样做，谢谢
你还在想你的div.p2。不要那样做。如果有很多 items 则编写一个函数来迭代这些 items 并切换它们的 isExpanded 属性（在我的示例中，它将是 MainVievModel 的一个方法）。当isExpanded 为真时出现div.p2 的事实是次要的。这纯粹是您的view 的属性。你的任务是操作视图 model。
我明白你的意思了，因为 for each 是一个数组，ixexpanded 属性真的很独特，现在一团糟，谢谢指点！