Kendo ui - 如何將選擇事件的kendo mvvm自動完成字段添加到視圖模型

是否有一種直接的方式來定義一個「選擇」事件處理函數在mvvm html屬性的kendo自動填充字段？Kendo ui - 如何將選擇事件的kendo 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, 
});

到目前爲止，這是使用MVVM HTML屬性模板中定義了類似領域的等價版本「數據-？？？」

<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事件，這是「選擇：相當於」事件處理程序屬性中的第一個例子：

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，然後使用包含此自動填充字段的自定義記錄編輯模板。

我們花了很多小時試圖跟蹤這一個，所以任何幫助將不勝感激。

來源

2017-08-04 GETools

您應該在data-bind屬性中包含您的select事件。

data-bind= events: { select: onSelect}

檢查這個jsFiddle。

來源

2017-08-07 02:18:22

使用劍道MVVM事件的一些參考和data attributes結合：

Kendo Autocomplete using MVVM

Events binding using MVVM

這裏是如何您可以use data attributes for configuring widgets using MVVM

，您可以選擇事件綁定到您的視圖模型如：

<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-11 07:17:50

Kendo ui - 如何將選擇事件的kendo mvvm自動完成字段添加到視圖模型

回答

相關問題