关于javascript：扩展kendo multiselect并使用MVVM


Extending kendo multiselect and working with MVVM

我正在尝试扩展剑道多选，以便它具有默认数据源以及模板。除了MVVM对象中的预加载值之外，其他所有功能都可以正常工作。当我开始更新已存在的multiselect时，MVVM的值将被更新，初始项不会被预加载：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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是：

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

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

我已经看到其他人对此问题有疑问，并添加了

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

(是的，看起来确实像个错误)

但是它仍然不起作用。

在Machine.Managers中已经有值时，不会加载它们。但是，如果我将值添加到多选，则它们将被添加到Machine.Managers中。

编辑：

我添加了一个实时示例

至少在演示中，这是一个小问题：您的data-value-field是错误的。结果，活页夹无法匹配所选元素。

代替

1
2
3
<div data-role="entitymultiselect"
 data-bind="value: selected"
 data-value-field="ProductId">

您需要

1
2
3
<div data-role="entitymultiselect"
 data-bind="value: selected"
 data-value-field="ProductId">

(工作演示)

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

相关讨论