данные Кендо UI DropDownList связывание значения

Question

Я использую Кендо UI DropDownList внутри ListView

<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 участников будет захвачен выпадающим списком как selectedValue, привязав StatusId участника к свойству value выпадающего списка, например, data-bind="value:StatusId". Но это странно, в моем случае, это бросает ошибку

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

, когда я удалил data-bind="value:StatusId", больше нет ошибки, но это не выбрать соответствующее выбранное значение.

Любые идеи об этой ошибке?

Answer 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> 

Script:

dropDownListValue: null, 
displayDropDownListValue: function() { 
    var dropDownListValue = this.get("dropDownListValue"); 
    return kendo.stringify(dropDownListValue); 
} 

Это кажется довольно запутанным, но я просто работал через это сам, и это не должно быть слишком большой сделки, чтобы учесть в будущем.