Kendo UI Dropdownlist 数据绑定值答案

【问题标题】：Kendo UI Dropdownlist data binding of valueKendo UI Dropdownlist 数据绑定值
【发布时间】：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" 时，错误消失了，但它没有选择适当的选定值。

关于这个错误的任何想法？

【问题讨论】：

标签： javascript kendo-ui kendo-mobile icenium kendo-mvvm

【解决方案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);
}

这似乎相当令人费解，但我自己只是解决了这个问题，未来应该不会有太大的问题。

【讨论】：