kendo ui中的Mvvm下拉列表

Posted

技术标签:

【中文标题】kendo ui中的Mvvm下拉列表【英文标题】:Mvvm dropdwonlist in kendoui 【发布时间】:2012-09-27 08:27:57 【问题描述】:

我的页面中有一个下拉列表,这是代码:

 <div id="test">
         Role: <span data-bind="text: role"></span>
    </br>
    Roles:<select id="roles" data-bind="source: roles, value: role" data-text-field="roleName" data-value-field="roleId" ></select>
    <ul id="view" data-template="Access-template" data-role="listview" data-bind="source:Accesses"></ul>

    <script id="Access-template" type="text/x-kendo-template">

        <li>
            <input type="checkbox" data-bind="checked: selected" />
            <label data-bind="text: AccessName" />
        </li>
    </script>


    </div>​

我希望当我更改下拉列表值时,它会更改我的角色集合。这是我的代码:

var Accesses = [
    AccessName: 'Create',
    selected: false
, 
    AccessName: 'Delete',
    selected: false
, 
    AccessName: 'Update',
    selected: true
];

var Roles = [
    roleName: "Admin",
    roleId: 1,
    accessItem: Accesses
, 
    roleName: "User",
    roleId: 2,
    accessItem: Accesses
];


var viewModel = kendo.observable(
    roles: Roles,
    accssesItem: Roles.accessItem
);

kendo.bind($("#test"), viewModel);

【问题讨论】:

【参考方案1】:

弄清楚选择了什么 DropDown 项目有点……不直观,但这是你想要的:

<script id="Access-template" type="text/x-kendo-template">
    <li>
        <input type="checkbox" data-bind="checked: selected" />
        <label data-bind="text: AccessName" />
    </li>
</script>

<select
    data-role="dropdownlist"
    data-bind="source: roles, events:  select: roleSelected "
    data-text-field="roleName"
    data-value-field="roleId"></select>

<ul data-template="Access-template"
    data-role="listview"
    data-bind="source: accessItem"></ul>

...和...

$(document).ready(function () 

    var roles = [
        roleName: "Admin",
        roleId: 1,
        accessItem: [
            AccessName: 'Create',
            selected: true
        , 
            AccessName: 'Delete',
            selected: true
        , 
            AccessName: 'Update',
            selected: true
        ]
    , 
        roleName: "User",
        roleId: 2,
        accessItem: [
            AccessName: 'Create',
            selected: false
        , 
            AccessName: 'Delete',
            selected: false
        , 
            AccessName: 'Update',
            selected: true
        ]
    ];

    var viewModel = kendo.observable(
        roles: roles,
        accessItem: roles[0].accessItem,
        roleSelected: function (e) 
            this.set("accessItem", this.roles[e.item.index()].accessItem);
        
    );

    kendo.bind("body", viewModel);
);

在这里工作 jsFiddle:http://jsfiddle.net/rally25rs/JHNm6/

【讨论】:

以上是关于kendo ui中的Mvvm下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jquery 禁用 kendo ui 下拉列表?

Kendo UI 下拉列表采用最大选项的大小

如何在 Kendo UI MVC 的网格中设置和获取下拉列表的值?

kendo ui 下拉框kendoDropDownList

具有级联下拉列表的 Kendo UI 网格

Kendo UI 下拉过滤器不适用于 jquery