Kendo UI Dropdownlist привязка данных значения

Я использую раскрывающийся список 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);
            });
    },

Я ожидаю, что при загрузке страницы выбранный идентификатор состояния участников будет захвачен раскрывающимся списком как selectedValue путем привязки StatusId участников к свойству value раскрывающегося списка, например data-bind="value:StatusId". Но в моем случае это странно, выдает ошибку

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

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

Есть идеи по поводу этой ошибки?


javascript kendo-ui kendo-mobile icenium kendo-mvvm
person xlinc    schedule 28.08.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Я вижу две возможные проблемы.

Во-первых, ваш 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);
}

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

person RyanCEI    schedule 02.09.2013