Knockout JS foreach 作为函数的输入

如何解决Knockout JS foreach 作为函数的输入

有没有办法将 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>

JS

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());

解决方法

是的，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.
    }
}