如果按下回车键,我该如何捕获?

时间:2016-06-16 13:19:20

标签: javascript mvvm kendo-ui

我正在尝试捕获是否已按下回车键并执行搜索。这是搜索页面的视图模型。

(function () 
{
    a.viewModels.userSearch = function (view, params) {
        $view = $(view);
        var self = a.viewModel({
            users: a.collection({
                url: '/admin/Account/SearchUsers',
                query: {
                        SearchText: null
                       }
            }).fetch(),
            setPageIndex: setPageIndex,
            search: search
        });

        $view.keypress(function (e) {
            if (e.keyCode == 13) {
                self.search(e);
            }
        });

        function search(e) {
            self.users.query.rowCount = 0;
            self.users.query.pageIndex = 1;
            self.users.fetch();
        }

        function setPageIndex(e) {
            e.preventDefault();
            self.users.query.set('pageIndex', $(e.currentTarget).data('page-index'));
            self.users.fetch();
        }

        return self;
    }

现在,这有效。问题是只有在按下“Enter”键2次后才能工作。好像我错过了与范围相关的东西,但js不是我的一杯茶。

如果它有任何帮助,这里是我的视图模型功能:

function viewModel(viewModelConfig) {

    var self = kendo.observable($.extend({
        busy: 0,
        resultMessage: null,
        clearResultMessage: clearResultMessage
    }, viewModelConfig));
    self.bind('change', onChange);

    function onChange(change) {
        var errorProp, errorMsg, infoProp, infoMsg;
        if (change.field.endsWith('.busy')) {
            if (self.get(change.field))
                self.set('busy', self.busy + 1);
            else if (self.busy > 0)
                self.set('busy', self.busy - 1);
        }
        else if (change.field.endsWith('.resultMessage')) {
            var data = self.get(change.field);
            self.set('resultMessage', data);
        }
    }

    function clearResultMessage(e)
    {
        if (e) e.preventDefault();
        self.set('resultMessage', null);
        return false;
    }

    return self;
}

1 个答案:

答案 0 :(得分:0)

我的网站上有类似的设置,并且使用MVVM,只需在元素的enter属性中添加自定义data-bind绑定,即可链接到您希望的视图模型中的函数执行。

添加自定义活页夹的代码如下:

kendo.data.binders.widget.enter = kendo.data.Binder.extend({
    init: function(element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);
        var binding = this.bindings.enter;
        $(element.element).keyup(function(e) {
            if( e.which === 13 )
                bindings.get();
        });
    },
    refresh: $.noop
});