BackboneJS: запуск проверки формы при отправке формы из представления - PullRequest
Новая
       32

BackboneJS: запуск проверки формы при отправке формы из представления

0 голосов
/ 30 декабря 2011

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

Я хочу сделать простой View, который обрабатывает формы и проверяет правильностьих.В будущем я хотел бы добавить все функции 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);

Теперь этот последний код работает, но «this» внутри функции проверки будет объектом $ ('# formid') вместо моего объекта Form.

Ответы [ 2 ]

3 голосов
/ 30 декабря 2011

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

К сожалению, метод delegate не работает для события submit в IE См. Комментарий в магистральном источнике

Простое решение - добавить эту строку кода в метод render. 

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

Вам также нужно будет связать контекст для validateFields в методе initialize 

initialize: function() {
  _.bindAll(this, 'render', 'validateFields');
}
0 голосов
/ 30 декабря 2011

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

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

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

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

Что касается этого кода: this.el.bind('submit', this.validateFields);. Если вы хотите сохранить контекст объекта Form, используйте привязку: 

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