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下拉列表的主要内容,如果未能解决你的问题,请参考以下文章