Question

友

我在devextreme mobile dxlist中创建了dxautocomplete。但只有第一行才形成。我想要每一行，我想在每一行得到不同的数据。要充满活力。我知道下面的代码中总会出现相同的代码，但是如何更改它以及如何在每行上显示它？

Html代码

   <div data-bind="dxList:{dataSource: [{ key: 1, title: 'Number' },
   { key:2,title: 'Item2' }]}">
   <div data-options="dxTemplate : { name: 'item' } ">
   <div data-bind="text: title"></div>
   <div id="a"></div>                    
   </div>
   </div>

Js代码

   $.ajax({
    type: "GET",
    url:MYURL,
    success: function (msg, result, status, xhr) {
    var obj = jQuery.parseJSON(msg);
    $("#a").dxAutocomplete({
    dataSource: obj,
    displayExpr: 'Name'// ı want to  this dynamic 
    });} });

Answer 1

在你的示例中，你混合了两种方法KnockoutJS和jQuery。此外，您对每个列表项使用id="a"。但id应该是唯一的。

因此，在您的情况下，我建议您将自动完成初始化移动到项目模板：

<div data-bind="dxList:{dataSource: [/*...*/]}">
<div data-options="dxTemplate : { name: 'item' } ">
    <div data-bind="text: title"></div>
    <div data-bind="dxAutocomplete: $root.getAutocompleteOptions.call($data)"></div>
</div>

有$root.getAutocompleteOptions函数计算每个自动完成的选项。请注意，您应该更改此功能的上下文：

$root.getAutocompleteOptions.call($data)

它允许您定义当前正在呈现的列表项：

getAutocompleteOptions: function() {
    var currentListItem = this;
    if(currentListItem.key === 1) { /*...*/ }
}

我在这里创建了一个演示 - https://jsfiddle.net/aj6rrjza/

动态使用dxautocomplete

1 个答案: