Question

使用正常工作代码查看此fiddler链接：KO Example Code

想法是用数据填充它们，然后能够在两个列表之间来回移动它们。

Answer 1

一旦我将jsFiddle中的资源添加到knockout js文件中，选择的填充对我来说很好。我使用了http://knockoutjs.com/js/knockout-1.2.0.js

好的，我已经编辑了我的答案并且在我意识到我误解了@ hyperslug的回复之后删除了大部分答案，然后去制作几乎完全相同的代码！ @ hyperslug的答案，比我的稍微好一点，因为我没有意识到removeAll会返回一系列被删除的项目。

除了@ Hyperslug的回答之外，您还有按钮启用状态的问题。在页面加载时，这由

解决

new ko.observableArray(),

而不是

new ko.observableArray([""]),

后者创建一个长度为1而不是0的可观察数组。

要在取消选中所有项目后更改按钮启用状态，您似乎需要清除availHighlight或selectHighlight。 removeAll（）再次进行救援。 this.availHighlight.removeAll（）要么 this.selectHighlight.removeAll（）

为了回答为什么@ hyperslug的$ .each（）代码不起作用，这是因为在jQuery的每个（）匿名函数中，'this'指的是集合中的项，而不是viewModel实例。

    $.each(removed, function(i,r){
        //'this' is now the same as 'r', so the following line doesn't work as intended
        this.available.push(r);
    });

希望这有帮助

Answer 2

请注意removeAll()返回已删除项目的数组。其次，没有相应的pushAll()。此外，事实证明没有必要关闭突出显示，可能是因为你要删除元素。

var removed = this.available.removeAll(this.availHighlight());
for(var i = 0; i < removed.length; i++) {
  this.selected.push(removed[i]);
}
//this.availHighlight([""]);

在这里演示：http://jsfiddle.net/7HyZC/

这个应该用于添加（但不适合我）：

$.each(removed, function(i,r){this.selected.push(r);});

我不能在某个地方拥有each机制......

Knockout Two选择列表示例

2 个答案: