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

Question

我刚从剑道 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());
    }
});