剑道UI DROPDOWNLIST数据的值

Question

结合我使用剑道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的参与者将通过将参与者的StatusId绑定到下拉列表的value属性（如data-bind="value:StatusId"），将其作为selectedValue在下拉列表中捕获。但它在我的情况奇怪，这是当我删除了data-bind="value:StatusId"，该错误消失抛出一个错误

Uncaught TypeError: Object #<Object> has no method 'get' 

但它不选择适当选择的值。

关于这个bug的任何想法？

Answer 1

我看到两个可能的问题。

首先，你的data-bind="value: StatusId"。你的ViewModel中有StatusId吗？我没有看到它，但它是一个扩展对象，所以它可以在粘贴代码之前定义。

第二个问题，这是不是在我看来，在所有明显的是，在下拉列表返回从列表中的数据源完整的对象;不只是要求的财产/领域。

为例见在其网站此演示页：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); 
} 

看来颇为曲折，但我就是通过这个工作我自己，它不应该是太大的交易，以考虑未来。