Backbone.js 按钮单击事件未触发答案

【问题标题】：Backbone.js Button Click Event Not FiringBackbone.js 按钮单击事件未触发
【发布时间】：2013-01-17 01:01:07
【问题描述】：

我在获取按钮单击事件以在主干中注册时遇到问题。我在它之前列出的事件（输入中的按键）工作正常。

这是我的观点：

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() ，但我似乎没有做任何事情来让按钮工作。我觉得它必须是我只是想念的相对简单的东西！有什么帮助吗？谢谢！

【问题讨论】：

标签： backbone.js backbone-events

【解决方案1】：

您的事件可能正在触发，但是

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

导致提前返回。 click 事件的 event 对象没有 keyCode，而且肯定不是 13。

只需将事件处理程序分成两个方法，并让它们调用一个通用方法：

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

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

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

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

【讨论】：

我知道这是一个简单的疏忽！我可能会将其保留在同一事件中，但在这种情况下对 e.keycode 进行短路测试！非常感谢！

【解决方案2】：

尝试改用keyup - 这可能会导致问题。 jquery docs 声明它不是官方活动，因此可能在浏览器等方面有不同的支持。我总是使用 keypress 并且可以肯定地说它适用于所有方面。

您还确定事件没有被触发吗？您是否尝试过在方法开始时发出警报？有时，老派的方法实际上会有所帮助！

【讨论】：