如何在敲除的嵌套for循环中进行数据绑定时比较两个数据

Question

假设有一个 JSON 文件包含：

{
    "First" : [
           "A",
           "B",
           "C"
     ],
     "Second" : [
            { "name" : "A"},
            { "name" : "C"}
      ]
}

现在，下面是我的 HTML 代码的一小部分，用于展示我正在努力实现的目标：

<span data-bind="foreach: First">
    <span data-bind="foreach: Second">
        //if First.A === Second.name then do something
    </span>
</span>

我该如何比较？ 我尝试了很多东西，但无法找出正确的方法。我知道 $data 可用于访问 "First" 的值，但在此嵌套循环中使用什么？我是新来的。任何建议将不胜感激。

更多信息：我的 HTML 代码实际上是这样的：

<span data-bind="foreach: first">
                <tbody data-bind="foreach: $root.second">
                    <tr data-bind="if: $parent === $data.name">
                        //do something
                    </tr>
                </tbody>
.
.
.
</span>

这行不通。

Answer 1

首先，您问题末尾的 html 无效：您不能在 span 中包含 tbody（尝试一下：您会看到浏览器忽略 tbody)。

现在，对于你的问题：我编写了一个与你的案例相似的视图模型，并根据 html.

这里要理解的重要一点是 $parent 指的是父上下文中的视图模型对象。因此，在下面的html中，foreach: $parent.seconds中的$parent指的是myVM上下文，而if: $parent中的$parent指的是firsts上下文。

var myVM = function () {                                     
  var self = this;
  self.firsts = ['A', 'B', 'C'];
  self.seconds = [{ "name" : "A"}, { "name" : "C"},];
};
ko.applyBindings(new myVM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span data-bind="foreach: firsts">
  <span data-bind="foreach: $parent.seconds">
    <span data-bind="if: $parent == $data.name">hello!</span>
  </span>
</span>

还有其他编码方式，另一种方式是 - 如果对您更方便的话 - 将 $parent.seconds 更改为 $root.seconds（并获得相同的结果）：

var myVM = function () {                                     
  var self = this;
  self.firsts = ['A', 'B', 'C'];
  self.seconds = [{ "name" : "A"}, { "name" : "C"},];
};
ko.applyBindings(new myVM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span data-bind="foreach: firsts">
  <span data-bind="foreach: $root.seconds">
    <span data-bind="if: $parent == $data.name">hello!</span>
  </span>
</span>

此外，我们可以通过添加别名来提高可读性：

var myVM = function () {                                     
  var self = this;
  self.firsts = ['A', 'B', 'C'];
  self.seconds = [{ "name" : "A"}, { "name" : "C"},];
};
ko.applyBindings(new myVM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span data-bind="foreach: { data: firsts, as: 'first' }">
  <span data-bind="foreach: { data: $root.seconds, as: 'second' }">
    <span data-bind="if: first == second.name">hello!</span>
  </span>
</span>

如何在敲除的嵌套for循环中进行数据绑定时比较两个数据

How to compare two data while data-binding in nested for loop in knockout

data-binding

knockout.js