Knockout VIewModel触发foreach内部的函数

Knockout VIewModel triggers function inside foreach

本文关键字：函数 内部 foreach VIewModel 触发 Knockout      更新时间：2023-09-26

我正在与一个奇怪的问题作斗争，我的想法已经用完了。

问题是，我的视图模型在点击时触发了foreach内部的功能。所以在这种情况下，如果我点击div menuConnections，测试调用函数就会被触发。即使我向testcall发送其他值（例如div id），当我单击menuConnections时，也会发送相同的值。

如何停止此操作并强制测试调用仅在我单击TheDivWhoCalls时执行？

function ProfileViewModel(userId) {
    var self = this;
  
    self.connectionRequests = ko.observableArray();
  self.getConnections = function () {
        $("#menuConnections").css({ "display": "block" });
    
    //other code which returns data
    };
  
  self.testcall = function(data) {
        alert(target);
    };;
    
  }
<div id="menuConnections" data-bind='click: getConnections'>Connections</div>
<div id="connections" style="display: none">
  
  <div data-bind="foreach: connectionRequests">
    
    <div id="TheDivWhoCalls" data-bind='click: $root.testcall("asd")'><img src="~/Resources/Images/yesIcon.png" /></div>
    
  </div>
  
</div>

如果没有看到ko.applyBindings的实际运行示例，我无法确定，但请尝试更改

data-bind='click: $root.testcall("asd")

至

 data-bind='click: $parent.testcall.bind($parent, "asd")

说明：

首先，我将$root更改为$parent。我不知道你的$root是什么，但可以放心地假设你的$parent是使用testcall方法的VM。

更重要的是，click:期望一个函数，但$root.testcall("asd")调用返回undefined的函数。相反，我们使用Function.prototype.bind从testcall创建一个新函数，参数设置为"asd"，this设置为$parent

您可能需要使用绑定语法。尝试data-bind="$root.testcall.bind($data, 'asd')"

相关文章：