更改下拉列表源未命中选定的值

时间:2013-02-06 04:51:56

标签: mvvm drop-down-menu kendo-ui

我正在尝试使用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使用fruits1作为源,则下拉列表2使用fruits2,下拉列表3使用fruits3。

它可以工作,但是如果您开始更改下拉列表中的选项,其中一个下拉列表中的显示值会毫无理由地更改。 例如,如果我在第一个下拉列表中选择“葡萄”,然后我开始玩下拉菜单2(将其更改为芒果,然后是苹果,然后是芒果等)下拉菜单1显示从“葡萄”变为其他内容(即使视图模型中的值“selectedFruit1”仍然是“葡萄”)。

我设置了这个jsbin http://jsbin.com/ebuhaq/1/edit,您可以在其中看到HTML。

所以我的问题是:为什么会这样?它是kendo mvvm中的一个错误吗?或者我错过了什么?

2 个答案:

答案 0 :(得分:1)

似乎这是剑道中的某种错误。使用他们的新版本(版本v2012.3.1315),我的代码按预期工作。 (我使用的是以前的版本:2012.3.1114)

答案 1 :(得分:0)

认为下拉列表正在维护其选定的索引。因此,当首次填充下拉菜单时,框3将设置为葡萄,其果实列表中的索引为0。下拉2更改后,橙色现在变为下拉3列表中的索引0。换句话说,我认为它总是通过selctedIndex值更新自己,而不是实际选择的对象。

这只是我的猜测,但我没有查看源代码,看看是否正确。