Knockout.js 如何从ko.js数组中的父函数访问调用子元素？

我正在使用knockout.js foreach循环创建一个复选框列表。我有一个可观察的数组，它保存复选框的值，但是当我调用函数检查它们的值时，

这个

元素指的是父元素，即viewModel。如何访问与单击的元素相关的数组元素

我已尝试从以下代码中删除

$parent

引用，但引发了此错误：

消息：未定义getSampleValue

这是创建复选框的foreach循环：

<!-- ko foreach: sampleList -->
            <div data-bind="css: { hasValue: $parent.getSampleValue() }">
                <span data-bind="click: $parent.sampleClick, text: name"></span>
                <div data-bind="click: $parent.sampleClick" class="spot fa fa-square"></div>
            </div>
<!-- /ko -->

样本列表的格式如下：

{
  {
    "name": "name1",
    "isChecked": false
  },
  {
    "name": "name2",
    "isChecked": true
  }
}

预期结果：当数组中给定项的isChecked值更改时，应调用函数

getSampleValue

，该函数应更新UI上的值。从该函数返回的isChecked值应该是数组中正确的元素，而不是父元素

实际结果：调用函数，但似乎仅在创建复选框时调用，而在更新

isChecked

值时不调用，并且函数中的

this

是调用方的父元素，因此没有

isChecked

值

非常感谢您的帮助

编辑： 因此，改变这一行：

<div data-bind="css: { hasValue: $parent.getSampleValue() }">

为此：

<div data-bind="css: { hasValue: isChecked }">

---

加载时似乎显示了正确的值，但即使可观察数组的值正在更改，它们仍不会在UI上更新。

视图模型中的函数已将此绑定到视图模型本身。您可以使用处理程序函数的第一个参数访问当前元素：

sampleViewModel = function (data) {
    var self = this;
    self.sampleList = ko.observableArray(data.sampleList);

    self.sampleClick = function (element) {
       element.isChecked = !element.isChecked;
    }

    self.getSampleValue = function (element) {
       return element.isChecked;
    }
}

见：

调用处理程序时，Knockout将提供当前模型值作为第一个参数。如果要为集合中的每个项目呈现一些UI，并且需要知道单击了哪个项目的UI，则这一点特别有用

---

另外，要正确绑定到

getSampleValue

，应该删除括号

<div data-bind="css: { hasValue: $parent.getSampleValue }">

或者，正如您已经发现的那样，由于函数返回值而不进行修改，因此您可以绑定到值本身：

<div data-bind="css: { hasValue: isChecked }">

---

您使用击倒的方法是错误的。不要将属于项的方法放入项的父项中。让项目对自己的状态负责

考虑下面的例子：

• SampleItem

  类跟踪自己的名称和自己的“选中”状态。它还提供了一种切换“已检查”状态的方法

• SampleApplication

  类只保留一个项目列表。它将用作页面的

  $root

  视图模型
• 视图使用

  isChecked

  来决定Font Awesome的CSS类，并透明地将单击事件链接到正确的接收者
• 整个viewmodel图由单个函数调用构建，构建嵌套的viewmodel，并将数据映射到过程中的可观察对象
• 不需要从子级到

  $parent

  的交叉引用

函数样本项（数据）{
var self=这个；
self.name=ko.observable（data.name）；
self.isChecked=ko.可观察（data.isChecked）；
self.toggleChecked=函数（）{
self.isChecked（！self.isChecked（））；
};
}
函数示例应用程序（数据）{
var self=这个；
self.sampleList=ko.observearray（）；
//viewmodel初始化（即数据映射）
data.sampleList.forEach（函数（itemData）{
self.sampleList.push（新的SampleItem（itemData））；
});
}
// -------------------------------------------------------
var rawModelData={
样本列表：[{
名称：“名称1”，
被检查：错误
}, {
名称：“名称2”，
我被检查过：是的
}]
};
var vm=新的SampleApplication（rawModelData）；
ko.应用绑定（vm）



<div data-bind="css: { hasValue: isChecked }">