我正在尝试使用 kendo mvvm 来解决以下问题:我有 3 个下拉列表,并且我需要在一个下拉列表中选择的选项不会出现在其他两个下拉列表中。这适用于所有 3 个下拉菜单。我做了以下事情:
var viewModel = kendo.observable({
fruits: [
{Text:'apple', Value:1},
{Text:'orange', Value:2},
{Text:'grapes', Value:3},
{Text:'banana', Value:4},
{Text:'mango', Value:5},
{Text:'kiwi', Value:6}
],
fruits1: function(){
var self = this;
var sf2 = self.get('selectedFruit2').Value;
var sf3 = self.get('selectedFruit3').Value;
var fruits = _.filter(self.fruits, function(e){
return e.Value !== sf2 && e.Value !== sf3;
});
return fruits;
},
selectedFruit1 : null,
fruits2: function(){
var self = this;
var sf1 = self.get('selectedFruit1').Value;
var sf3 = self.get('selectedFruit3').Value;
var fruits = _.filter(self.fruits, function(e){
return e.Value !== sf1 && e.Value !== sf3;
});
return fruits;
},
selectedFruit2 : null,
fruits3: function(){
var self = this;
var sf1 = self.get('selectedFruit1').Value;
var sf2 = self.get('selectedFruit2').Value;
var fruits = _.filter(self.fruits, function(e){
return e.Value !== sf1 && e.Value !== sf2;
});
return fruits;
},
selectedFruit3 : null
});
viewModel.selectedFruit1 = viewModel.fruits[0];
viewModel.selectedFruit2 = viewModel.fruits[1];
viewModel.selectedFruit3 = viewModel.fruits[2];
kendo.bind($("form"), viewModel);
下拉菜单 1 使用水果 1 作为源,下拉菜单 2 使用水果 2,下拉菜单 3 使用水果 3。
它可以工作,但是如果您开始更改下拉菜单中的选项,那么其中一个下拉菜单中的显示值会无缘无故地更改。例如,如果我在第一个下拉列表中选择“葡萄”,然后我开始使用下拉列表 2(将其更改为芒果,然后是苹果,然后是芒果等等)下拉列表 1 显示从“葡萄”更改为其他内容(即使视图模型“selectedFruit1”中的值仍然是“葡萄”)。
我设置了这个 jsbin http://jsbin.com/ebuhaq/1/edit,你可以在其中看到 HTML。
所以我的问题是:为什么会这样?它是 kendo mvvm 中的错误吗?还是我错过了什么?