Question

我正在使用Telerik的Kendo UI和他们的autocomplete小部件以及他们的MVVM框架，并且在获取一个框来设置检索时遇到了一些困难（和选择）对象到视图模型上的绑定对象。例如......

var viewModel = kendo.observable({
  Context: {}
});

$("#context").kendoAutoComplete({
    dataTextField: "Name",
    dataValueField: "Id",
    delay: 800,
    dataSource: {
        dataType: "json",
        serverFiltering: true,
        transport: {
            read: {
                url: "/search/data",
                data: function (data) {
                        return {
                        term: data.filter.filters[0].value
                    }
                }
            }
        }
    }
}).data("kendoAutoComplete");

然后我使用以下HTML;

<input data-val="true"
       id="context"
       name="context"
       placeholder="Context"
       type="text"
       data-bind="value: Context" />

这会触发一个返回以下内容的控制器操作;

[
  {
    Id: "items/1",
    Name: "Item 1",
    Label: "Item 1 Label"
  },
  {
    Id: "items/2",
    Name: "Item 2",
    Label: "Item 2 Label"
  },
  {
    Id: "items/3",
    Name: "Item 3",
    Label: "Item 3 Label"
  }
]

但是，当我在使用自动填充功能搜索对象后选择对象时，我的viewmodel上的Context属性仍为null。

我可以通过添加特定的select函数来解决这个问题。

select: function(e) {
    var dataItem = e.sender.dataItem(e.item.index()).toJSON();
    // update the model
    viewModel.set('Context', dataItem);
}

但我真的宁愿它按照预期的那样工作;有什么建议吗？

Answer 1

问题是您将viewModel定义为Observable对象，但您没有将其绑定到input。

尝试添加绑定，如下所示：

kendo.bind($("#context"), viewModel);

在此处查看：http://jsfiddle.net/OnaBai/DYVLT/

使用MVVM进行Kendo自动完成|没有设置绑定对象

1 个答案: