Какой лучший способ привязать выпадающий список пользовательского интерфейса Kendo к ViewModel, который заполнен источником данных?

Question

У меня есть DropDownList kendoUI, который находится в шаблоне и привязывается к ViewModel, наряду с пролетом, который привязан к элементу данных, выбранного в DropDownList:

<p> 
    <label>Appointment Type: </label> 
    <select id="appointmentTypeDropDownList" 
      data-text-field="Name" 
      data-value-field="AppointmentTypeId" 
      data-role="dropdownlist" 
      data-bind="source:appointmentTypes, value:AppointmentTypeId" 
      data-autobind="true" 
      data-select="onSelected" /> 
</p> 
<p><label>Duration:</label> 
    <span data-bind="text:selectedAppointment.Duration"></span> minutes 
</p> 

Мой ViewModel:

var viewModel = new kendo.observable({ 
    appointmentTypes: appointmentTypesDataSource, 
    selectedAppointment : null, 
}); 

Первоначально я использовал жестко запрограммированный массив назначений типов и установил selectedAppointment для назначенияTypes [0] в приведенном выше представленииModel. Это не работает сейчас, потому что источник данных загружается асинхронно. ViewModel обновляется в onSelected функции:

var onSelected = function (e) { 
    var dataItem = this.dataItem(e.item.index()); 
    viewModel.set("selectedAppointment", dataItem); 
}; 

шаблон в окне, и пядь опорожнить первый раз он загружает, а затем работает после этого (после загрузки данных из первого запроса).

Мой вопрос в том, как я могу получить привязку данных к пролету для работы над первым запросом, чтобы он отображал значение Duration текущего выбранного типа назначения из списка, возвращаемого источником данных? Я пытаюсь привязать его к выбранному элементу данных в раскрывающемся списке? Есть ли обратный вызов где-то, что я должен использовать для этого? Шаблон находится внутри kendoScheduler, если это имеет значение:

var template = kendo.template($("#editor").html()); 

$("#scheduler").kendoScheduler({ 
    editable: { 
     template: template() 
    } 
}); 

Спасибо!

Update: Шаблон я работаю с является редактором для Кендо UI планировщика, который не был связан с его ViewModel, но использует часть ViewModel для своего источника данных. В этом случае попытка использования синтаксиса data-bind = "events: {...}" вызывала странные ошибки типа, которые я получал. Чтобы подключить событие привязки к базе данных, Atanas сообщит мне, чтобы использовать data-bound = "onDataBound" и глобальную функцию обработчика (или поочередно настроить декларативный планировщик и привязать его к viewmodel). Использование данных в сочетании с ответами ниже работало для меня.

Answer 1

Вы можете использовать событие на раскрывающемся списке и установите selectedAppointment оттуда:

data-bind="source:appointmentTypes, value:AppointmentTypeId, events: { dataBound: onDataBound }" 

и ваш вид модели:

var viewModel = new kendo.observable({ 
    appointmentTypes: appointmentTypesDataSource, 
    selectedAppointment : null, 
    onDataBound: function(e) { 
     e.sender.select(0); // will trigger your change handler 
    } 
}); 

Answer 2

Вам необходимо установить начальное значение selectedAppointment. Это единственный способ, которым текст диапазона будет установлен до того, как источник данных будет заполнен. Вот работоспособной демо на основе продуктов Northwind в:

<span data-bind="text:selectedProduct.ProductName"></span> 
<select data-bind="source: products, value: selectedProduct" 
     data-text-field="ProductName" 
     data-value-field="ProductID" 
     data-role="dropdownlist"></select> 
<script> 
var o = kendo.observable({ 
    selectedProduct: { 
    ProductID: 2, 
    ProductName: "Chang" 
    }, 
    products: new kendo.data.DataSource({ 
    transport: { 
     read: { 
     url: "http://demos.telerik.com/kendo-ui/service/products", 
     dataType: "jsonp" 
     } 
    } 
    }) 
}); 

kendo.bind(document.body, o); 
</script> 

Вот демо: http://jsbin.com/pawiz/1/edit