1

是否有一种直接的方法可以在 kendo 自动完成字段的 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,
});

到目前为止，这是使用 mvvm html 属性“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-attribute 结构中定义 select 事件的事件处理程序，这相当于第一个示例中的“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，然后使用包含此自动完成字段的自定义记录编辑模板。

我们已经花了很多时间试图追踪这个，所以任何帮助都将不胜感激。

4

2 回答 2

1

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

data-bind= events: { select: onSelect}

检查这个jsFiddle。

于 2017-08-07T02:18:22.980 回答
0

使用 Kendo MVVM 进行事件和data attributes绑定的一些参考资料：

使用 MVVM 的剑道自动完成

使用 MVVM 绑定事件

这是使用data attributesMVVM 配置小部件的方法

您可以将选择事件绑定到您的 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);

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>
于 2017-08-11T07:17:50.683 回答