Question

我刚刚开始使用kendo UI并且马上遇到了一个相当简单的问题。所以我有

首先选择由“用户”对象数组组成的元素。
使用用户名
包含用户角色的第二个选择

我到目前为止的代码：

HTML标记：

<form id="change-user">
   <select data-text-field="username" data-bind="source: userList, value: selectedUser">
   </select>
   <label>Username: <input data-bind="value: selectedUser.username"></label>
   <label>Role: 
       <select data-text-field="name" data-value-field="id" data-bind="source: userRoles, value: selectedUser.role"></select>
   </label>
</form>

使用Javascript：

var model = kendo.observable({
        userList: [
            {
                id: 1,
                username: 'user1',
                role: 1
            },
            {
                id: 2,
                username: 'user2',
                role: 2
            },
            {
                id: 3,
                username: 'user3',
                role: 3
            }
        ],
        selectedUser: null,
        userRoles: [
            {
                id: 1,
                name: 'Admin'
            },
            {
                id: 2,
                name: 'User'
            },
            {
                id: 3,
                name: 'Moderator'
            }
        ]
    });

    kendo.bind($('form#change-user'), model);

但这似乎不起作用。似乎属性'selectedUser'获取字符串值'user1'，'user2'等等而不是成为javascript对象。

我知道我的问题的解决方案可能非常简单，但我无法弄明白 - 剑道文档非常庞大，而且我不确定应该使用哪些关键词。

谢谢。

Answer 1

您无法使用HTML元素上的声明性语法绑定和反对下拉列表的值。 Kendo期望绑定一个对象属性，它具有值数据类型，如字符串或数字。但是，您可以通过在javascript中声明第一个下拉列表并挂钩其更改或选择事件以将所选用户绑定到您的可观察模型来获得您所寻求的行为。然后，其余控件的行为与您期望的一样。

以下是如何定义第一个下拉列表的示例，这里是jsFiddle中工作示例的链接：http://jsfiddle.net/PytHq/3/。

$('#users').kendoDropDownList({
    dataSource: userList,
    dataTextField: 'username',
    dataValueField: 'id',
    change: function () {
        model.set('selectedUser', $('#users').data('kendoDropDownList').dataItem());
    }
});

Kendo数据绑定与<select>元素</select>中的自定义对象

1 个答案: