Шаблон для кэширования подэлементов вида в Backbone.js

Question

Перемещение из мира без рамки в Backbone.js, я применил практику «кэширования» объектов jQuery, всегда сохраняя ссылку на них (для КПД).

var myCachedEl = $('#element'); 
myCachedEl.on('click', function() { 
    myCachedEl.html('That tickles.'); 
}); 

В Backbone, это то, как я мог бы кэшировать мои объекты JQuery:

var RandomView = Backbone.View.extend({ 

    intitialize: function() { 
    this.$lastRoll = this.$el.find('#last-roll'); 
    this.listenTo(this.model, 'change', this.render); 
    }, 

    render: function() { 
    this.$lastRoll.html(this.model.get('lastRoll')); 
    }, 

    events: { 
    'click #last-roll': function() { 
     this.model.roll(); 
    } 
    } 
}); 

var randomView = new RandomView({ 
    el: '#random-view', 
    model: random 
}); 

Учитывая мой ток установки, я хотел бы сделать что-то сродни к ...

events: { 
    'click this.$lastRoll': function() { 
     // ... 
    } 
} 

... где в моих событиях я мог привязать событие click к кешированному элементу. Однако приведенный выше синтаксис не работает. Я подозреваю, что может быть каким-то образом «официально» определять подэлементы, так что я могу использовать некоторый синтаксис, похожий на то, что выше.

Вопрос: Есть «лучше», «чище» или более «Магистраль-семантический» шаблон для кэширования с моей точки зрения в суб-элементы, которые я мог/должен следовать, вместо моего текущего шаблона?

Answer 1

Вы правильно кешируете свои элементы. Просто синтаксис привязки обработчиков событий не работает так, как вы предлагаете в своем вопросе. Потому что он работает по-другому.

Все события, которые вы определяете с помощью events: { ... }, привязаны к корневому элементу вида el, а не к дочернему элементу last-roll. Когда событие срабатывает в вашем представлении, оно будет пузыриться до корневого элемента, и тогда обработчик определит, соответствует ли target события селектору. Например, в коде:

events: { 
    'click #last-roll': function... 
} 

связывает событие щелчка к RandomView, и когда происходит щелчок, он будет проверять, если цель last-roll (т.е. соответствует селектор), и если это так ваш обработчик будет вызывается. Вот почему вы передаете селекторов, а не элементы. Это эффективно, поэтому идите.

Если вам все еще нужно, чтобы связать события с другими элементами (например, document для global keypress event handling или подобных), вы можете использовать JQuery-х on или Backbone-х listenTo. С on вы должны помнить о том, чтобы отменить регистрацию своих обработчиков с помощью off при удалении вашего вида, чтобы предотвратить утечку памяти, в то время как с listenTo вы можете положиться на автоматическую очистку, сделанную самой базой.