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

标签 jquery backbone.js backbone-views backbone-events backbone.js-collections

我是第一次使用 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");
});    

我不知道我错过了什么。任何帮助将不胜感激,并对愚蠢的问题表示歉意。

最佳答案

您通过 el:'.mysearch' 将 View 的上下文设置为 .mysearch,同时尝试监听 发出的事件 View 范围下的 .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/

关于jquery - 如何使用backbone.js制作搜索表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43977339/

相关文章:

jquery - 是否可以停止 Backbone "read"请求

javascript - 我如何与<选项>交互

javascript - 运行 if/each 语句以独立选择 div 和更改背景图像位置

backbone.js - 主干 View 单击复选框监听器

javascript - 如何防止 javascript/backbone.js 克隆模型共享属性

javascript - 使用 POST 请求获取集合?

backbone.js - 从tinymce编辑器中的onchange_callback访问主干模型

jquery - Bootstrap 在本地运行但在实时运行时不完全运行(jquery)

javascript - 如何检查选取框是否滚动

backbone.js - require.js i18n 模块 - 如何从服务器加载语言?