Knockout JS中如何将foreach遍历数据作为独立函数的入参使用

核心修正逻辑如下：

• Knockout 没有内置直接绑定原生事件名的语法，所有DOM事件绑定都需要通过官方提供的event绑定器实现
• 直接在绑定中写函数调用会在页面初始化绑定阶段就执行逻辑，需要套一层匿名函数，才能实现事件触发时再执行并传参的效果

第一种方案（沿用你现有的全局myFunction） #

直接修改img标签的绑定逻辑即可：

<div data-bind='foreach: arrayValue'>
    <div>
      <p data-bind='text: $data.name'></p>
      <img src='' data-bind='event: { error: function() { myFunction($data.img) } }'></img>
    </div>
</div>

如果需要兼容保留error事件的默认行为，在匿名函数最后返回true即可：function() { myFunction($data.img); return true; }

第二种方案（更符合Knockout MVVM规范，避免全局函数污染） #

把处理函数挂载到ViewModel上，修改后的JS代码如下：

var myObjArr = [
    {name: 'entry 1', img: imageUrl}, {name:'entry 2', img: image2Url},
    // 其余数据项
]

var model = function() {
    const self = this;
    self.arrayValue = ko.observable(myObjArr);
    // 图片错误处理逻辑挪到ViewModel内
    self.handleSvgError = function(imgUrl) {
        // 原myFunction的逻辑写在这里
        // do something...
        return true; // 可选，保留事件默认行为
    }
}
ko.applyBindings(new model());

对应的HTML绑定逻辑：

<div data-bind='foreach: arrayValue'>
    <div>
      <p data-bind='text: $data.name'></p>
      <!-- foreach内调用父级ViewModel的方法用$parent访问 -->
      <img src='' data-bind='event: { error: () => $parent.handleSvgError($data.img) }'></img>
    </div>
</div>

内容的提问来源于stack exchange，提问作者b_900