剑道淘汰赛组合框事件问题答案

【问题标题】：kendo knockout combobox event issue剑道淘汰赛组合框事件问题
【发布时间】：2017-03-06 05:10:19
【问题描述】：

html部分

<input data-bind="kendoComboBox: { dataTextField: 'FirstName', dataValueField: 'PersonID',  data: AllUsers,template: '<span>#= data.FirstName # #= data.LastName # </span>',  value: SelectedUserID, 
change: UserSelectionChanged}" />

模型内的事件处理程序

var self= this;...    
self.UserSelectionChanged = function () {

        $.ajax({
            type: "POST",
            url: defaultUri + '/Home/GetUserTasks',
            data: JSON.stringify({ PersonID: self.SelectedUserID() }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (o) {
                self.SelectedUserTask(null);
                self.SelectedUserTask(o);
                //RRM: Added this line below so that whenever user dropdown is changed or refresh button is clicked in AssignedTo the first task of that particular user is Selected.
                self.selectTask(o[0]);

            }
        });
    };

这里正在调用事件，但self 中的数据不存在。该事件似乎与淘汰赛没有很好的结合。如何在kendo combobox事件中正确绑定ko事件？

【问题讨论】：

标签： events knockout.js kendo-ui kendo-combobox

【解决方案1】：

我不会注册更改事件，而是订阅SelectedUserID：

var self= this;
...
self.SelectedUserID.subscribe(function(selectedUserId) {

    $.ajax({
        type: "POST",
        url: defaultUri + '/Home/GetUserTasks',
        data: JSON.stringify({ PersonID: selectedUserId }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (o) {
            self.SelectedUserTask(null);
            self.SelectedUserTask(o);
            //RRM: Added this line below so that whenever user dropdown is changed or refresh button is clicked in AssignedTo the first task of that particular user is Selected.
            self.selectTask(o[0]);

        }
    });
});

这样，SelectedUserID 何时或如何更改都无关紧要。

【讨论】：

【解决方案2】：

正如 sroes 所写，订阅 observable 是最好的选择。

如果你必须绑定到剑道事件，那么你可以这样做：

data-bind="... change: UserSelectionChanged(), ...."

注意末尾的函数调用括号^

现在你的功能必须是这样的：

this.UserSelectionChanged = function () {
    var self = this;

    return function(e) {
        $.ajax({ 
            self.blah ...
        });
    }
}

现在您已经创建了一个闭包，您可以使用 self 访问您的视图模型，但您还可以在 e 中拥有原始 Telerik 事件参数，例如 e.dataItem 等。

所以现在你势不可挡，你可以做任何事！

【讨论】：