扩展MultiSelect小部件会破坏MVVM中的值绑定

时间:2013-10-31 15:04:37

标签: javascript jquery jquery-plugins mvvm kendo-ui

我没有任何特别的扩展多选小部件。问题是价值的约束不再有效。在第一个示例中,我正在使用本机窗口小部件并正确绑定值。第二个是我使用扩展多选的地方,它在值绑定上失败并且是空白的。

HTML:

<selectdata-role="multiselect"data-bind="source: selectData, value: selectedIDs"data-text-field="Name"data-value-field="ID"></select>
<selectdata-role="multiselectcustom"data-bind="source: selectData, value: selectedIDs"data-text-field="Name"data-value-field="ID"></select>

使用Javascript:

//EXTEND MULTISELECT WITH NOTHING MUCH
kendo.ui.plugin(kendo.ui.MultiSelect.extend({
    init: function(element, options) {
        kendo.ui.MultiSelect.fn.init.call(this, element, options);
    },
    options: {
        name: 'MultiSelectCustom'
    }
}));

varviewModel = kendo.observable({
    selectedIDs: [ 1, 3 ],
    selectData: [{
        Name: 'Bill Smith',
        ID: 1
    }, {
        Name: 'Jennifer Jones',
        ID: 2
    }, {
        Name: 'Tim Philips',
        ID: 3
    }]
});

kendo.bind('body', viewModel);

enter image description here

我想我可以再次为“价值”重新创建活页夹,但这确实是一个错误吗?我有一个证明这一点的jsFiddle:http://jsfiddle.net/basememara/2Dacw/9/

1 个答案:

答案 0 :(得分:2)

这不是一个错误,因为multiselect已经为它设置了自定义绑定器。您可以尝试为新的扩展角色复制多选的绑定器。

试试这个:

 kendo.data.binders.widget.multiselectcustom = kendo.data.binders.widget.multiselect;

您可以在小部件扩展代码之前/之后放置它,但是 应该告诉绑定函数如何正确绑定到小部件。

我还会看一下自定义绑定器的kendo文档,但要注意它不是很明显