如何使用 backbone.js 制作搜索表单

Question

我是第一次使用 Backbone.js，并试图弄清楚它是如何工作的。我想制作一个搜索表单，但我卡在了起点。

这是我的输入搜索框

<input type="txt" name="" class="mysearch">

当我在此搜索框中键入内容时，我想（在控制台上）打印一些内容。但它没有按预期工作。

jQuery(document).ready(function(){
var mymodel= Backbone.Model.extend({
    defaults:function(){
        return{
        name:''
        }
    }
});

var mycollection=Backbone.Collection.extend({
    model:mymodel
});
var mynewcollection= new mycollection();
var myview=Backbone.View.extend({
    model:mynewcollection,

    el:'.mysearch',
    initialize:function(){
        console.log("initialize");            
    },
    events:{
        'keypress .mysearch':'search'
    },
    search:function(){
        console.log("at search");
    }
});
new myview;
    console.log("starting");
});

我想念什么，我不知道。对于愚蠢的问题，我们将不胜感激和抱歉。

Answer 1

您通过 el:'.mysearch' 将视图的上下文设置为 .mysearch，同时尝试监听视图范围内的 .mysearch 元素发出的事件。您基本上是在尝试收听 .mysearch .mysearch 元素，这显然在您的设置中不起作用。

尝试

var myview=Backbone.View.extend({  
    el:'.mysearch',
    initialize:function(){
        console.log("initialize");            
    },
    events:{
        'keypress':'search'
    },
    search:function(){
        console.log("at search");
    }
});

还有一个演示 https://jsfiddle.net/9kwhw5yj/

如何使用 backbone.js 制作搜索表单

how to make a search form using backbone.js

jquery

backbone.js

backbone-events

backbone-views

backbone.js-collections