Почему мои события CoffeeScript / Backbone.js не стреляют?
-
29-09-2019 - |
Вопрос
Я пытаюсь ознакомиться с CoffeeScript и Backbone.js, и я должен пропустить что-то.
Этот кофериппид:
MyView = Backbone.View.extend
events: {
"click" : "testHandler"
}
testHandler: ->
console.log "click handled"
return false
view = new MyView {el: $('#test_container')}
view.render()
Генерирует следующий JavaScript:
(function() {
var MyView, view;
MyView = Backbone.View.extend({
events: {
"click": "testHandler"
},
testHandler: function() {
console.log("click handled");
return false;
}
});
view = new MyView({
el: $('#test_container')
});
view.render;
}).call(this);
Но click
Событие не стреляет testHandler
Когда я нажимаю test_container
.
Если я изменим выходной JavaScript на:
$(function() {
var MyView, view;
MyView = Backbone.View.extend({
events: {
"click": "testHandler"
},
testHandler: function() {
console.log("click handled");
return false;
}
});
view = new MyView({
el: $('#test_container')
});
view.render;
});
Удаление call(this)
и добавление $
, все работает как ожидалось. Что мне не хватает?
Решение
(function () {}).call(this);
это просто способ немедленно вызвать анонимную функцию при указании приемника. Он работает в основном так же, как:
this.method = function () {};
this.method();
$(function () {})
, по крайней мере, в jQuery, является сокращением для
$(document).ready(function () {})
который запускает данную функцию, когда дерево DOM было полностью построено. Похоже, это необходимое условие для вашего Backbone.View.extend
Функция работать должным образом.
Другие советы
Для использования CoffeeScript и jQuery вместе для сценариев приложений, поместите свой код в этот вид шаблона:
$ = jQuery
$ ->
MyView = Backbone.View.extend
events:
"click": "testHandler"
testHandler: ->
console.log "click handled"
false
view = new MyView el: $('#test_container')
view.render()
Попробуйте использовать синтаксис декларации класса CoffeeScript, например:
class BacklogView extends Backbone.View
constructor: (@el) ->
this.delegateEvents this.events
events:
"click" : "addStory"
# callbacks
addStory: ->
console.log 'it works!'
Что происходит, когда вид, или, по крайней мере, View.el, динамически сгенерирован? Вы можете вызвать метод View.deLegeEvents () для вручную установить EventHandlers.
Вот аналогичный кофейный фонд для воспитания детей в ParentView, а затем делегировать события Childview.
window.ParentView = Backbone.View.extend
addOne: (thing) ->
view = new ChildView({model: thing})
this.el.append view.render().el
view.delegateEvents()