Data binding 剑道数据与<；中的自定义对象绑定；选择>；要素

我刚从剑道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>

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

我知道我的问题的解决方案可能非常简单，但我想不出来-剑道文档非常庞大，我不确定应该在谷歌上搜索哪些关键字

---

谢谢。

您不能在HTML元素上使用声明性语法绑定和反对dropdownlist的值。Kendo希望绑定值数据类型（如字符串或数字）的对象属性。但是，您可以通过在javascript中声明第一个dropdownlist并连接到它的更改或选择事件来将所选用户绑定到您的可观察模型，从而获得您想要的行为。然后，其余的控件按照您期望的方式运行

下面是一个如何定义第一个dropdownlist的示例，下面是一个链接，指向JSFIDLE中的一个工作示例：

---

因此，您希望第一个

的值是用户对象本身，而不是它的

用户名

属性？这不是您想要的吗@Brett是的，我希望第一个select的值是“User”对象，这样在observable selectedUser中，ser可以变成object而不是string，这样第二个复选框就可以修改“User”对象。但是，您提供的代码似乎无法解决此问题。指向JSFIDLE:中工作示例的链接不再工作。。。

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);

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