javascript - 扩展 MultiSelect 小部件会破坏 MVVM 中的值绑定(bind)

Question

我扩展了多选小部件，没有什么特别的。问题是值(value)观的约束不再起作用。在第一个示例中，我使用 native 小部件并很好地绑定(bind)值。第二个是我使用扩展多选的地方，它在值绑定(bind)上失败并且为空。

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);

我想我可以再次为“值”重新创建 Binder ，但这确实是一个错误吗？我有一个 jsFiddle 演示了这一点:http://jsfiddle.net/basememara/2Dacw/9/

Answer 1

这并不是一个错误，因为多选已为其设置了自定义 Binder 。您可以尝试为新的扩展 Angular 色复制多选 Binder 。

试试这个:

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

您可以将其放置在小部件扩展代码之前/之后，但这应该告诉绑定(bind)函数如何正确绑定(bind)到您的小部件。

我还会查看自定义 Binder 的剑道文档，请注意，尽管它不是很全面