MVVM在Kendoui的Dropdwonlist [英] Mvvm dropdwonlist in kendoui

问题描述

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

I have a dropdownlist in my page this is the code:

 <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>​

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

and I want that when I change the dropdownlist value it changes my role collection. This is my code:

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

推荐答案

弄清楚选择了哪个DropDown项有点……不直观，但这就是您想要的:

Figuring out what DropDown item is selected is a little... unintuitive, but here is what you want:

<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/

Working jsFiddle here: http://jsfiddle.net/rally25rs/JHNm6/

这篇关于MVVM在Kendoui的Dropdwonlist的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！