Kendo ui - Как прикрепить событие выбора для поля автозаполнения kendo mvvm к viewModel

Есть ли простой способ определить функцию обработчика событий «выбрать» в HTML-атрибутах mvvm для поля автозаполнения кендо?

Например, вот рабочая версия поля автозаполнения с использованием настройки jquery:

$("#fieldProjectName").kendoAutoComplete({
  minLength: 4,
  filter: "contains",
  dataTextField: "ProjectName",
  placeholder: "Begin typing the Project Name",
  select: function (e) { selectAutoComplete(this.dataItem(e.item.index()), "ProjectItemKey", "ProjectName") },
  dataSource: dataProjectList,
});

На данный момент это эквивалентная версия определения аналогичного поля в шаблоне с использованием html-атрибутов mvvm «data-???»

<input name="ProjectItemKey"
  data-bind="value:ProjectName"
  data-value-primitive="true"  
  data-value-field="ProjectItemKey"
  data-text-field="ProjectName"
  data-source="dataProjectList"
  data-role="autocomplete" 
  data-min-length="4"
  data-filter="contains"
  data-placeholder="Begin typing the Project Name"
/>

Что мы не знаем, как сделать, так это определить обработчик события для события select в этой структуре html-атрибута mvvm, которая эквивалентна свойству «select:» в первом примере:

  select: function (e) { selectAutoComplete(this.dataItem(e.item.index()), "ProjectItemKey", "ProjectName") },

Например, если было что-то вроде:

  data-select: "onSelectProject"

тогда мы могли бы включить эту функцию в шаблон для обработки события «выбрать»:

  function onSelectProject(e) {
    selectAutoComplete(this.dataItem(e.item.index()), "ProjectItemKey", "ProjectName");
  }

К сожалению, мы не знаем, как это сделать. Единственная документация, связанная с этим, которую мы видели, включает в себя настройку пользовательской модели kendo.observable с собственным методом, встроенным в модель, а затем настройку чего-либо в событиях привязки данных. Однако это кажется очень сложным и непрямым подходом. Кроме того, мы понятия не имеем, как мы можем манипулировать моделью, поскольку она исходит из kendoGrid, который затем использует пользовательский шаблон редактирования записи, который включает это поле автозаполнения.

Мы потратили много часов, пытаясь отследить это, поэтому любая помощь будет принята с благодарностью.


jquery eventhandler kendo-ui kendo-autocomplete kendo-mvvm
person GETools    schedule 04.08.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны включить событие select в атрибут data-bind.

data-bind= events: { select: onSelect}

Проверьте этот jsFiddle.

person Cara Tilos    schedule 07.08.2017

arrow_upward
0
arrow_downward

Некоторые ссылки по использованию Kendo MVVM для привязки событий и data attributes:

Автозаполнение кендо с использованием MVVM

Привязка событий с помощью MVVM

Вот как вы можете использовать data attributes для настройки виджетов с помощью MVVM.

Вы можете привязать событие select к вашей модели представления как:

<input data-role="autocomplete" 
       data-bind="events: { select: onAutocompleteSelect}" 
       .... 
/>

Итак, если у вас есть JS примерно так, как показано ниже:

var names = [
{"name": "Gilberto"},
{"name": "Dennis"},
{"name": "Joanna"},
{"name": "Abbigail"},
{"name": "Shannon"},
{"name": "Kadyn"},
{"name": "Gregory"}
];
var viewModel = kendo.observable({
    list: names,
    sel:'',
    onAutocompleteSelect: function (e){
        alert('Autocomplete select event');
    }
});
kendo.bind($('#persons'), viewModel);

HTML:

<div id="persons">
<input
  data-role="autocomplete" 
  data-bind="source: list, value: sel, events: { select: onAutocompleteSelect}"
  data-value-primitive="true"  
  data-value-field="name"
  data-text-field="name"
  data-min-length="4"
  data-filter="contains"
  data-placeholder="Begin typing the Project Name"
/>
</div>
person Rahul Gupta    schedule 11.08.2017