剑道ui-如何将剑道mvvm自动完成字段的选择事件附加到视图模型

Question

在剑道自动完成字段的mvvm html属性中，是否有一种直接的方法来定义“选择”事件处理程序函数？

例如，下面是使用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,
});

到目前为止，这是使用MVVMHTML属性“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"
/>

我们不知道如何在这个mvvm html属性结构中定义选择事件的事件处理程序，它相当于第一个例子中的“选择：”属性：

  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");
  }

不幸的是，我们不知道怎么做。我们所看到的唯一相关文档涉及设置自定义剑道。使用嵌入在模型中的自定义方法创建可观察模型，然后在数据绑定事件中设置某些内容。然而，这似乎是一种非常复杂和间接的方法。此外，我们不知道如何操作该模型，因为它来自一个kendoGrid，然后该kendoGrid使用一个自定义记录编辑模板，该模板包含这个自动完成字段。

我们花了很多时间试图找到这一个，所以任何帮助将不胜感激。

Answer 1

使用Kendo MVVM进行事件和数据属性绑定的一些参考：

使用MVVM自动完成剑道

使用MVVM绑定事件

下面是如何使用数据属性来配置使用MVVM的小部件

您可以将选择事件绑定到viewModel，如下所示：

<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);

超文本标记语言：

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

Answer 2

您应该在data-bind属性中包含选择事件。

数据绑定=事件：{Select： onSelect}

检查这个jsFiddle。