在 backbone.js 视图的文本字段上键入的事件名称是什么？

Question

我已经创建了一个视图来显示有关我从 MySQL 数据库中获得的测验的信息。为了搜索特定的测验，我在一个名为 MyQuizSearchView 的新视图中实现了一个搜索栏。下面是我的 MyQuizSearchView 代码，

var MyQuizSearchView = Backbone.View.extend({
            model: myQuizC,
            el: $('#search'),
            events: {
                "change input": "searchEvent"
            },
            initialize: function() {
                this.render()
            },
            render: function() {
                var self = this;

                // var block1 = '  <input type="text" placeholder="What are you looking for?" onkeyup="searchByTags(\'' + this.value + '\')">'
                var block1 = '  <input type="text" placeholder="What are you looking for?">'
                self.$el.append(block1)

            },
            searchEvent: function(event) {
                console.log("heyyy")
            }
        })
        var myQuizSearchView = new MyQuizSearchView();

我想在用户开始在文本字段上输入时触发一个名为 searchEvent 的函数。如何使用主干视图事件实现下面的 onkeyup 方法？

<input type="text" placeholder="What are you looking for?" onkeyup="searchByTags(this.value)">

Answer 1

Backbone.js 是一个用于组织 JavaScript 代码的紧凑型库。 MVC/MV* 框架是它的另一个术语。如果您不熟悉 MVC，它只是一种设计用户界面的技术。 JavaScript 函数使程序用户界面的创建变得相当容易。 BackboneJS 提供了多种构建元素来帮助开发人员创建客户端 Web 应用程序，包括模型、视图、事件、路由器和集合。

View 中的事件允许我们直接将事件侦听器附加到 el、自定义选择器、相关选择器和相关选择器，以及如果没有提供选择则附加到 el。事件由键值对表示：

“”：“” 视图中有许多事件可用，例如单击、更改、按键、提交、鼠标悬停、dbclick 等。

语法：

var demoView = Backbone.View.extend({
    events: {
        'click button: 'function1',
        'keypress label': 'function2',
    },
})

Answer 2

只需在事件地图中使用

keyup

而不是

change

。

var MyQuizSearchView = Backbone.View.extend({
    model: myQuizC,
    el: $('#search'),
    events: {
        "keyup input": "searchEvent"
    },
    // ...
});

如果搜索开销很大，您可能希望限制

searchEvent

方法，使其运行次数不会超过必要的次数。

var MyQuizSearchView = Backbone.View.extend({
    model: myQuizC,
    el: $('#search'),
    events: {
        "keyup input": "searchEvent"
    },
    initialize: function() {
        this.render();
        this.searchEvent = _.throttle(this.searchEvent, 500);
    },
    // ...
});