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

Data binding 剑道数据与<;中的自定义对象绑定;选择>;要素,data-binding,mvvm,kendo-ui,Data Binding,Mvvm,Kendo Ui,我刚从剑道UI开始,马上遇到了一个相当简单的问题。 所以我有 首先选择由“用户”对象数组组成的元素 使用用户名进行常规输入 第二个选择包含用户角色 到目前为止,我掌握的代码是: HTML标记: <form id="change-user"> <select data-text-field="username" data-bind="source: userList, value: selectedUser"> </select> <

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