Question

我正在尝试扩展一个kendo multiselect，以便它具有默认数据源和模板。除了MVVM对象中的预加载值之外，它都可以正常工作。当我开始更新exented multiselect时，MVVM的值会更新，初始项目不会被预加载：

kendo.ui.plugin(kendo.ui.MultiSelect.extend({
    init: function(element, options) {
        var ds = new kendo.data.DataSource({
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "/SecurityEntities",
                    dataType: "json"
                },
                parameterMap: function(data) {
                    return {
                        prefixText: '',
                        count: 5,
                        getUsers: true,
                        getGroups: false
                    };
                }
            },
            schema: {
                data: function(data) {
                    console.log($.parseJSON(data));
                    return $.parseJSON(data);
                }
            }
        });
        options = options == null ? {} : options;
        options.itemTemplate = "...";
        options.tagTemplate = "...";
        options.dataSource = ds;

        kendo.ui.MultiSelect.fn.init.call(this, element, options);
    },
    options: {
        name: 'EntityMultiSelect'
    }
}));

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

然后我的HTML是：

<div data-bind="value: machine.Managers" data-role="entitymultiselect" 
     data-delay="400" data-animation="false" 
     data-placeholder="Select users to notify"></div>

我将整个容器绑定到页面的viewModel对象。

我见过其他人对这个问题有疑问并添加了

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

（是的，看起来确实像个错误）

但它仍然不起作用。

如果Machine.Managers中已有值，则不会加载它们。但是，如果我向multiselect添加值，则会将它们添加到Machine.Managers。

修改

我添加了实时example

Answer 1

至少在你的演示中，这是一个微不足道的问题：你的data-value-field是错误的。因此，活页夹无法与所选元素匹配。

而不是

<div data-role="entitymultiselect" 
 data-bind="value: selected" 
 data-value-field="ProductId"></div>

你需要

<div data-role="entitymultiselect" 
 data-bind="value: selected" 
 data-value-field="ProductID"></div>

（working demo）

由于您没有在问题的代码中定义值字段，因此问题可能相同。

扩展kendo多选和使用MVVM

1 个答案: