Как новый хэш 'Events' Backbone View работает со значениями функций вместо строк в версии 0.9.0? - PullRequest
Новая
       34

Как новый хэш 'Events' Backbone View работает со значениями функций вместо строк в версии 0.9.0?

7 голосов
/ 02 февраля 2012

Журнал изменений Backbone 0.9.0 говорит:

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

Когда я пытаюсь выполнить следующее, происходит сбой, говоря, что значение для события равно undefined. 

var BB = Backbone.View.extend({
  'initialize': function() {

    this.$el.html('<input type="button" value="Click me!" />');
    jQuery('body').html(this.el);
  },

  'events': {
    'click input[type="button"]': this.buttonClicked
  },

  'buttonClicked': function() {
    alert('button clicked!');
  }

});

window.b = new BB()

Я неправильно понимаю новую функцию?Может кто-нибудь объяснить, как это работает иначе, чем я ожидал?Возможно, это просто мой синтаксис JavaScript / значение 'this' во время определения, который не работает.

Способ, которым я привык к этому, все еще работает: 

'events': {
  'click input[type="button"]': 'buttonClicked'
},

1 Ответ

14 голосов
/ 02 февраля 2012

Когда парсер JavaScript попадает сюда: 

'events': {
  'click input[type="button"]': this.buttonClicked
},

this, вероятно, window, а не экземпляр BB, как вы ожидаете.У объекта window нет свойства buttonClicked (по крайней мере, у вас его нет), поэтому вы действительно говорите следующее: 

'events': {
  'click input[type="button"]': undefined
},

, и в этом ваша ошибка.

Если вы посмотрите на источник для delegateEvents, вы увидите, что означает ChangeLog: 

delegateEvents: function(events) {
  // ...
  for (var key in events) {
    var method = events[key];
    if (!_.isFunction(method)) method = this[events[key]];
    // ...
  }
},

Это _.isFunction вызовто, что вас интересует. Это означает, что вы можете сказать что-то вроде этого: 

events: {
  'click input[type="button"]': function() { alert('pancakes!') },
  'click button': some_function_that_is_in_scope
}

Таким образом, вы можете поместить определенные функции (либо по имени, если они доступны, либо как литералы функций) в events справочная таблица.

...