我在listview中使用了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
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
属性,当页面加载时,参与者的选定statusId将被下拉列表捕获为selectedValue,像这样data-bind="value:StatusId"
。但是在我的情况下它很奇怪,它正在抛出错误
Uncaught TypeError: Object #<Object> has no method 'get'
当我删除data-bind="value:StatusId"
时,错误消失但它没有选择适当的选定值。
有关此错误的任何想法?
答案 0 :(得分:4)
我看到两个可能的问题。
首先,您的data-bind="value: StatusId"
。 ViewModel中有StatusId
吗?我没有看到它,但它是一个扩展的对象,因此可以在粘贴的代码之前定义它。
第二个问题,我认为这一点并不明显,就是dropdownlist从列表数据源返回完整对象;不仅仅是要求的财产/领域。
请在他们的网站上查看此演示页面以获取示例: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);
}
这看起来相当令人费解,但我自己也在努力解决这个问题,将来不应该考虑太大的事情。