javascript 剑道 UI 下拉列表数据绑定值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18478733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo UI Dropdownlist data binding of value
提问by xlinc
I'm using Kendo UI dropdownlist inside a 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>
the 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);
});
},
I'm expecting that the when the page load, the selected statusId of the participants will be captured by the dropdownlist as selectedValue by binding the particpants' StatusIdto the valueproperty of the dropdown, like this data-bind="value:StatusId". But it's wierd in my case, it's throwing an error
我期望在页面加载时，参与者的选定 statusId 将通过将参与者绑定StatusId到value下拉列表的属性而被下拉列表捕获为 selectedValue ，如下所示data-bind="value:StatusId"。但在我的情况下它很奇怪，它抛出了一个错误
Uncaught TypeError: Object #<Object> has no method 'get'
when I removed the data-bind="value:StatusId", the error is gone but It doesnt select the appropriate selected value.
当我删除 时data-bind="value:StatusId"，错误消失了，但它没有选择适当的选定值。
Any ideas about this bug?
关于这个错误的任何想法？
采纳答案by RyanCEI
I see two possible issues.
我看到两个可能的问题。
First, your data-bind="value: StatusId". Is StatusIdin you ViewModel? I don't see it, but it's an extended object so it may be defined before your pasted code.
首先，您的data-bind="value: StatusId". 是StatusId在你的ViewModel？我没有看到它，但它是一个扩展对象，因此它可以在您粘贴的代码之前定义。
The second issue, and this is not at all obvious in my opinion, is that the dropdownlist returns the full object from your list datasource; not just the requested property/field.
第二个问题，在我看来一点也不明显，是下拉列表从列表数据源返回完整对象；不仅仅是请求的属性/字段。
See this demo page at their web site for an example: http://demos.kendoui.com/web/mvvm/widgets.html
在他们的网站上查看此演示页面以获取示例：http: //demos.kendoui.com/web/mvvm/widgets.html
Specifically, they use a helper function to return a string representation of the object. You could instead return just the StatusIdas you want.
具体来说，他们使用一个辅助函数来返回对象的字符串表示。相反，您可以StatusId根据需要返回。
<h4>DropDownList </h4>
<select data-role="dropdownlist"
data-text-field="name" data-value-field="value" data-bind="source: colors, value: dropDownListValue">
</select>
Script:
脚本：
dropDownListValue: null,
displayDropDownListValue: function() {
var dropDownListValue = this.get("dropDownListValue");
return kendo.stringify(dropDownListValue);
}
It seems rather convoluted, but I just worked through this myself and it shouldn't be too big of a deal to account for in the future.
这似乎相当令人费解，但我只是自己解决了这个问题，未来应该不会有太大的交易。
