敲除 JS foreach 作为函数的输入

Question

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

Answer 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.
    }
}

敲除 JS foreach 作为函数的输入

Knockout JS foreach as input of function

javascript

jquery

foreach

knockout.js

knockout-2.0