如何使用KnockoutJS在foreach循环中指定不同的点击绑定

How to specify different click bindings in a foreach loop with KnockoutJS

本文关键字：绑定 KnockoutJS 何使用 foreach 循环      更新时间：2023-09-26

我有一个knockout可观察数组，其形式为:

this.controls = ko.observableArray([
        { 
            name: 'Previous',
            action: '$root.previous'
        },
        { 
            name: 'Next'          ,     
            action: '$root.next'
        },
        { 
            name: 'Save',
            action: '$root.save'
        }
]);

我想做以下几点:

<div class="controls navigation">
    <ul data-bind="foreach: $root.controls">
        <li>
            <span data-bind="text: name, click: action"></span>
        </li>
    </ul>
</div>

视图创建三个独立的span，它们本质上是按钮。我的目标是，当用户每次单击特定的span时，在视图模型中调用相应的操作。

但是，这行不通。

如何循环遍历数组并为每个项指定不同的单击绑定动作?

我可以很容易地单独写出每个span(在这个特定的例子中，因为数组中只有3个项目)，但是我很好奇如何使用数组来完成这一点。

你很接近了。假设您已经像这样定义了previous、next和save 

this.previous = function() { ... };

假设你这样定义self 

self = this;

那么你所要做的就是像这样更新你的数组:

this.controls = ko.observableArray([
    { 
        name: 'Previous',
        action: self.previous
    },
    { 
        name: 'Next',     
        action: self.next
    },
    { 
        name: 'Save',
        action: self.save
    }
]);

请注意action不再是一个字符串，而是一个函数的引用。

http://jsfiddle.net/tlarson/Dwwft/

也许你可以这样重构

this.controls = ko.observableArray([
        { 
            name: 'Previous'
        },
        { 
            name: 'Next'     
        },
        { 
            name: 'Save'
        }
]);
this.myAction = function (value, event) {
    if(value == 'Previous')
    {
       // do stuff
    }
    else if(value == 'Next')
    {
       // do stuff
    }
    else if(value == 'Save')
    {
       // do stuff
    }
    return true;
}
然后

<div class="controls navigation">
    <ul data-bind="foreach: $root.controls">
        <li>
            <span data-bind="text: name, click: myAction"></span>
        </li>
    </ul>
</div>
相关文章：