2013-02-01 51 views
0

我无法获得按钮单击事件以在骨干中注册。我之前列出的事件(按键输入中)正常工作。Backbone.js按钮单击事件没有触发

这是我的观点:

App.Views.TaskAddForm = Backbone.View.extend({ 
    tagName: 'div', 
    initialize: function(){ 


    }, 
    events: { 
     'keypress #newTask': 'createNewTask', 
     'click #newTaskBtn': 'createNewTask', 
    }, 
    template: App.Templates.TaskAddForm, 
    render: function(){ 
     this.$el.html(this.template()); 
     this.$el.attr('id','taskAddForm'); 
     if (!this.newTask){ 
      this.newTask = this.$('#newTask'); 
      this.newPriority = this.$('#newPriority'); 
     } 
     return this; 
    }, 
    createNewTask: function(e){ 
     if (e.keyCode !== 13) { 
      return; 
     } 
     var task = this.newTask.val(); 
     var priority = this.newPriority.val(); 
     if ($.trim(task).length > 0){ 
      this.collection.add({name: task, priority: priority}); 
     } 
     this.clearForm(); 
    }, 
    clearForm: function(){ 
     this.newTask.val(''); 
     this.newPriority.val(1); 
    } 
}); 

这里是我的模板:

<h2>Add Task</h2> 
<div class="input-append"> 
    <select id="newPriority" class="input-medium" style="margin-right: 20px;"> 
     <option value="1">Now</option> 
     <option value="2">Today</option> 
     <option value="3">Tomorrow</option> 
     <option value="4">Sooner</option> 
     <option value="5">Later</option> 
    </select> 
    <input type="text" id="newTask" placeholder="New Task" class="input-xxlarge"> 
    <button class="btn" type="button" id="newTaskBtn">Add Task</button> 
</div> 

你可以看到,我实际上没有传递任何进入这个模板,但我想仍然使用模板,因为我将根据用户正在处理的内容添加并删除此添加窗体视图到页面。

输入的按键有效。点击它旁边的按钮,不会!我甚至尝试在我的渲染函数中添加this.delegateEvents(),但我没有做任何事情似乎让按钮工作。我觉得它必须是相对简单的东西,我只是想念!任何帮助?谢谢!

回答

3

你的事件可能是射击,但

if (e.keyCode !== 13) { 
    return; 
} 

导致早日回归。该event对象click事件没有keyCode,也肯定不是13

事件处理程序就分成两种方法,并让他们拨打的共同方法:

events: { 
    'keypress #newTask': 'taskNameChanged', 
    'click #newTaskBtn': 'addButtonClicked', 
}, 

taskNameChanged: function(e) { 
    if(e.keyCode === 13) this.createTask(); 
}, 

addButtonClicked: function() { 
    this.createTask(); 
} 

createTask: function() { 
    //... 
} 
+0

我知道这是一个简单的疏忽!我可能会保持它在同一事件,但做一个e.keycode短路测试,如果条件!非常感谢! – BeniRose

0

尝试使用keyup相反 - 这可能会导致一个问题。 jquery docs表明它不是一个正式的事件,因此可能会有不同的浏览器支持等。我总是使用keypress,并可以肯定地说,这是全面的。

你也是积极的事件不被解雇吗?您是否尝试过在该方法开始时粘贴警报?有时老派的方法实际上可以帮助!

相关问题