Kendo UI Dropdownlist 数据绑定值
Posted
技术标签:
【中文标题】Kendo UI Dropdownlist 数据绑定值【英文标题】:Kendo UI Dropdownlist data binding of value 【发布时间】:2013-08-30 23:39:06 【问题描述】:我在列表视图中使用 Kendo UI 下拉列表
<ul data-role="listview" id="participants-listview" data-style="inset" data-template="participants-listview-template" data-bind="source: participants, events click: onSelectParticipant " />
<script type="text/x-kendo-template" id="listview-template">
<div>
<span>#:RoleDesc#</span>
<span>
<select data-role="dropdownlist" id="status-id"
data-text-field="StatusDesc"
data-value-field="StatusId"
data-bind="value: StatusId, source: participantStatuses, events: change: onParticipantStatusChange "
name="Status"
required="required"
validationMessage="required">
</select>
</span>
</div>
</script>
视图模型
viewModel = kendo.data.ObservableObject.extend(
dataSource: new kendo.data.DataSource(
transport:
type: "odata",
read:
url: function()
return meetings/participants";
),
participants: [], //listview data
participantStatuses: [ // dropdownlist selection
StatusId: 1, StatusDesc: "Invited" ,
StatusId: 6, StatusDesc: "Present" ,
StatusId: 7, StatusDesc: "Absent"
],
selectedParticipant: null,
showListView: function(e)
viewModel.dataSource.fetch(function()
var data = viewModel.dataSource.data();
meetingViewModel.set("participants", data);
);
,
我希望在页面加载时,通过将参与者的 StatusId
绑定到下拉列表的 value
属性,下拉列表将捕获参与者的选定状态 ID 作为 selectedValue,就像这样 @987654325 @。但在我的情况下它很奇怪,它会抛出一个错误
Uncaught TypeError: Object #<Object> has no method 'get'
当我删除 data-bind="value:StatusId"
时,错误消失了,但它没有选择适当的选定值。
关于这个错误的任何想法?
【问题讨论】:
【参考方案1】:我看到两个可能的问题。
首先,您的data-bind="value: StatusId"
。 StatusId
在你的 ViewModel 中吗?我没有看到它,但它是一个扩展对象,因此它可以在您粘贴的代码之前定义。
第二个问题,我认为这一点也不明显,是下拉列表从您的列表数据源返回完整对象;不仅仅是请求的属性/字段。
在他们的网站上查看这个演示页面以获取示例:http://demos.kendoui.com/web/mvvm/widgets.html
具体来说,它们使用辅助函数返回对象的字符串表示形式。您可以根据需要只返回 StatusId
。
<h4>DropDownList </h4>
<select data-role="dropdownlist"
data-text-field="name" data-value-field="value" data-bind="source: colors, value: dropDownListValue">
</select>
脚本:
dropDownListValue: null,
displayDropDownListValue: function()
var dropDownListValue = this.get("dropDownListValue");
return kendo.stringify(dropDownListValue);
这似乎相当令人费解,但我自己只是解决了这个问题,未来应该不会有太大的问题。
【讨论】:
以上是关于Kendo UI Dropdownlist 数据绑定值的主要内容,如果未能解决你的问题,请参考以下文章
Kendo Ui Dropdownlist Set Visible via Javascript
Kendo UI 级联 DropdownList 是如何工作的?
Kendo UI 将 DropDownList 添加到 Grid (MVC)