Knockout JS foreach 作为函数的输入

Posted 2023-03-27

【中文标题】Knockout JS foreach 作为函数的输入

【英文标题】：Knockout JS foreach as input of function

【发布时间】：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>

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

【参考方案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.
    

【讨论】：

这太棒了！非常感谢