knockout.js - 如何在淘汰视图模型点击事件中访问 $parent 或 $parents[]？

Question

我有一种情况，我想通知祖父母或 $parents[1] 子视图模型中发生的点击事件。所以基本上我希望能够做到这一点

self.$parents[1].actionTaken

我认为这不起作用，因为绑定上下文与视图模型，但我想听听是否有人对做这样的事情的正确方法有想法。谢谢

 self.save = function () {

     //do stuff to self first, then

      self.$parents[1].actionTaken();

};

score 25 · Accepted Answer

或者使用bind技巧

data-bind="click: $parent.foo.bind($parent)"

现在，当您访问 foo 函数时，this关键字将指向父上下文。

foo: function(child) {
   this.children.remove(child);
}

score 22 · Accepted Answer

或者，您可以通过以下方式将参数传递给视图模型的事件处理程序：更改您的save方法

self.save = function(theParents) {
    theParents[1].actionTaken();
}

并通过以下方式绑定您的处理程序：

data-bind="click: function() { $data.save($parents) }"

有关更多信息，请参阅点击处理程序文档中的注释 2（您需要向下滑动一点）

score 16 · Accepted Answer

现在（使用knockout 3.0.0）只需向子函数添加两个参数（由点击绑定执行），第一个将被分配当前视图模型，第二个将被分配点击事件参数。

然后调用 ko.contextFor() 并传递事件目标，您将可以通过上下文对象访问 $parent。

this.myChildFunction = function (vm, e) {
  var context = ko.contextFor(e.target);
  context.$parent.myParentFunction();
};

（不知道在其他答案期间这是否可能......）

score 3 · Accepted Answer

实际上，动作是在 knockoutjs 世界的视图模型中定义的。$parents/$data 是“上下文”。我创建了一个数据结构来展示您的需求。公司>销售部>员工

您可以在这个 jsfiddle 示例中找到它：在子事件中调用根操作

如果您出于某种原因仍想这样做，您还可以在祖父母的上下文中定义actionTaken()函数（而不是作为视图模型方法）。但这可能不是通常的方式。不管怎样，看看这个：

self.company={name:'ABC', click:function(){self.onCompClicked();}, salesDepartment:{manager:'Mgr',employees:['Smith','John']}};

然后将绑定点击事件更改为：

data-bind="text: $data, click: $parents[1].click"

第 2 版的更新代码在这里： invoke context action in child event

4 回答 4