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

【问题标题】：How to specify different click bindings in a foreach loop with KnockoutJS如何使用 KnockoutJS 在 foreach 循环中指定不同的点击绑定
【发布时间】：2013-04-20 09:12:01
【问题描述】：

我有一个可淘汰的可观察数组，形式为：

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>

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

但是，这不起作用。

如何循环遍历数组并为每个项目指定不同的点击绑定操作？

我可以轻松地写出每个跨度个体（在这种特定情况下，因为数组中只有 3 个项目），但我很好奇如何使用数组完成此操作。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

你很亲密。假设您已经像这样定义了上一个、下一个和保存

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

假设你这样定义自己

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/

【讨论】：

是的！做到了。我之前尝试过类似的方法（但我没有使用self，而是在 observableArray 函数中使用了this。感谢您的帮助！！！

【解决方案2】：

也许你可以这样重构

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>

【讨论】：