Событие нажатия кнопки 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>

You can see I'm not actually passing anything into this template, but I wanted to still use a template because I will be adding and removing this Add Form view to the page depending on what the user is working on.

Клавиатура на ввод работает. Щелчок по кнопке рядом с ним - нет! Я даже пытался добавить this.delegateEvents() в свою функцию рендеринга, но ничего из того, что я делаю, не заставляет кнопку работать. Я чувствую, что это должно быть что-то относительно простое, чего мне просто не хватает! Любая помощь? Спасибо!


backbone.js backbone-events
person BeniRose    schedule 01.02.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Ваше событие, вероятно, запускается, но

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() {
  //...
}
person jevakallio    schedule 01.02.2013
comment
Я знал, что это была простая оплошность! Я, скорее всего, оставлю его в том же событии, но проведу тест короткого замыкания для e.keycode в этом условии! Большое спасибо! - person BeniRose; 02.02.2013

arrow_upward
0
arrow_downward

Попробуйте вместо этого использовать keyup — это может вызвать проблему. В документах jquery указано, что это не официальное мероприятие, поэтому может иметь разную поддержку в разных браузерах и т. д. всегда используйте keypress и можете точно сказать, что это работает по всем направлениям.

Также вы уверены, что событие не запускается? Вы пытались вставить предупреждение в начале метода? Иногда подход старой школы действительно может помочь!

person jcvandan    schedule 01.02.2013