Knockout JS foreach 作为函数的输入答案

【问题标题】：Knockout JS foreach as input of functionKnockout JS foreach 作为函数的输入
【发布时间】：2021-07-31 19:51:32
【问题描述】：

有没有办法将 foreach 中的数据用作单独函数的输入？我不想使用图像的源，而是想将其留空并在错误时调用一个函数，这将允许我操作 SVG。我的图片目前采用以下格式：

<img src='' onerror=myFunction(imgUrl)></img>

但是我希望能够做这样的事情：

<div data-bind='foreach: arrayValue'>
    <div>
      <p data-bind='text: $data.name'></p>
      <img src='' data-bind='onerror: myFunction($data.img)'></img>
    </div>
</div>

function myFunction(img){
    do something...
}

var myObjArr = [
    {name: 'entry 1', img: imageUrl}, {name:'entry 2', img: image2Url},...
]

var model = function() {
    this.self = this;
    this.arrayValue = ko.observable(myObjArr);
}
ko.applyBindings(new model());

【问题讨论】：

标签： javascript jquery foreach knockout.js knockout-2.0

【解决方案1】：

是的，event 绑定就是为此而存在的。在foreach 循环中时，KO 会自动将当前项作为参数传递给函数。请注意，由于 KO 处理绑定上下文的方式，在从循环内部引用视图模型上的函数时，您必须使用 $parent。

<div data-bind='foreach: item'>
    <div>
      <p data-bind='text: $data.name'></p>
      <img src='' data-bind='event: { error: $parent.errorHandler }'></img>
    </div>
</div>

JS：

var model = function() {
    var self = this;
    self.item = ko.observableArray([
        {name: 'entry 1', img: imageUrl}, {name:'entry 2', img: image2Url},...
    ]);
    self.errorHandler = function(item) {
        // 'item' will be an object from the self.item array
        // So you can use item.img, item.name, etc.
    }
}

【讨论】：

这太棒了！非常感谢