1

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

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 个项目），但我很好奇如何使用数组完成此操作。

4

2 回答 2

3

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

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/

于 2013-04-19T19:52:47.683 回答
0

也许你可以像这样重构它

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>
于 2013-04-19T19:35:43.990 回答