BackboneJS: проверка формы триггера на форме submit from view

Question

Итак, я начал использовать Backbone.js для структурирования кода javascript и иметь модульные приложения, и я столкнулся с проблемой регистрации событий.

Я хочу сделать простой вид, который обрабатывает формы и проверяет их. В будущем я хотел бы добавить все яваскрипт как живые функциональность, проверки, парить эффекты и т.д.

Это упрощенный код я прямо сейчас:

var Form = Backbone.View.extend({ 
    attributes: { 
     att1 = 'att1', 
     att2 = 'att2' 
    }, 
    events: { 
     'submit': 'validateFields' 
    }, 
    initialize: function(element) { 
     this.el = $(element); 
    }, 
    validateFields: function() { 
     alert(this.attributes.att1); //do something 
     return false; 
    } 
}); 

var f = new Form('#formid'); 

У меня проблема была в том, что validateFields функция не вызывается, когда я отправляю форму. Я также попытался использовать это в конструкторе:

this.el.bind('submit', this.validateFields); 

Теперь, что последний код работает, но «это» внутри функция проверки будет являться $ («#») FormID объект, вместо моей формы объекта.

Answer 1

Попробуйте установить ваш el другим способом:

var f = new Form({el: '#formid'}); 

В этом случае вы можете даже удалить метод инициализации (или изменить его):

var Form = Backbone.View.extend({ 
    // ... 
    initialize: function() { 
     // Some code 
    }, 
    // ... 
}); 

Насколько этот код обеспокоен: this.el.bind('submit', this.validateFields); , Если вы хотите сохранить контекст объекта формы вы должны использовать связывание:

this.el.bind('submit', _.bind(this.validateFields, this)); // using Underscore method 
this.el.bind('submit', $.proxy(this.validateFields, this)); // using jQuery method 

Answer 2

Backbone использует delegate метод JQuery, чтобы связать события с обратных вызовов в events хэш.

К сожалению, метод delegate не работает для подавать события в IE See comment in Backbone source

легко исправить, чтобы добавить эту строку кода в методе render.

render: function() { 
    //render the view 
    $(this.el).submit(this.validateFields); 
} 

Вам также потребуется связать контекст для validateFields в методе инициализации

initialize: function() { 
    _.bindAll(this, 'render', 'validateFields'); 
}