Question

是否有一种直接的方式来定义＆＃34;选择＆＃34;用于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属性在模板中定义类似字段的等效版本＆＃34;数据 - ???＆＃34;

<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事件的事件处理程序，它相当于＆＃34; select：＆＃34;第一个例子中的属性：

  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，然后使用包含此自动完成字段的自定义记录编辑模板。

我们花了很多时间试图追踪这个，所以任何帮助都会非常感激。

Answer 1

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

data-bind= events: { select: onSelect}

选中jsFiddle。

Answer 2

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

Kendo Autocomplete using MVVM

Events binding using MVVM

以下是use data attributes for configuring widgets using MVVM

的方法

您可以将select事件绑定到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>

Kendo ui - 如何将kendo mvvm自动完成字段的选择事件附加到viewModel

2 个答案: