ListBox 小部件移动未定义的项目

Question

我正在使用 Kendo-UI for jQuery，版本 2021.1.119。

我遇到的问题是，我可以初始化列表框小部件并显示初始状态，但是当我尝试将一项从一个列表框移动到另一个列表框时，会导致该值从“来自”列表框和“未定义”被添加到“to”列表框。

我在第一个 ListBox 中设置了 connectWith 属性来引用第二个 ListBox，并且我已经验证了在初始状态下添加到 ListBox 小部件中的项目是我期望的数据项。所以我不确定为什么 undefined 会被传递。

这是一个最小的可重现示例：https://dojo.telerik.com/oMOdEmOf

这就是我配置两个 ListBox 小部件的方式：

{
    listBox: {
        available: {
            name: 'listbox-roles-available',
            selector: '#listbox-roles-available',

            element: function() {
                const element = $(this.selector);
                return element;
            },
            init: function () {
                const element = this.element();
                if (element) {
                    element.kendoListBox({
                        connectWith: modelUserRoles.listBox.selected.name,
                        dataTextField: 'RoleName',
                        dataValueField: 'RoleId',
                        toolbar: {
                            tools: ['transferTo', 'transferFrom', 'transferAllTo', 'transferAllFrom']
                        }
                    });
                }
                return this.widget();
            },
            setItems: function (items) {
                items = items || [];
                const listbox = this.widget();
                listbox.remove(listbox.items());
                for (let item of items) {
                    listbox.add(item);
                }
            },
            widget: function () {
                const element = this.element();
                return element?.data('kendoListBox');
            }
        },
        selected: {
            name: 'listbox-roles-selected',
            selector: '#listbox-roles-selected',

            element: function() {
                const element = $(this.selector);
                return element;
            },
            init: function () {
                const element = this.element();
                if (element) {
                    element.kendoListBox({
                        dataTextField: 'RoleName',
                        dataValueField: 'RoleId'
                    });
                }
                return this.widget();
            },
            setItems: function (items) {
                items = items || [];
                const listbox = this.widget();
                listbox.remove(listbox.items());
                for (let item of items) {
                    listbox.add(item);
                }
            },
            widget: function () {
                const element = this.element();
                return element?.data('kendoListBox');
            }
        }
    }
}

Answer 1

TLDR； add方法实际上并没有添加整个对象，使用setDataSource方法。

---

我能够解决我的问题。这很奇怪，因为当我在

setItems

函数中设置断点时，当我执行

listbox.add

时，它正在添加对象，但是当我将添加事件绑定到列表框并检查 dataItem 时，它只是文本而不是完整的对象。

所以我将

setItems

函数更改为使用

setDataSource

方法：

setItems: function (items) {
    items = items || [];

    const listbox = this.widget();
    listbox.setDataSource({ data: items });
}