Почему мои события CoffeeScript / backbone.js не запускаются? - PullRequest
Новая
       8

Почему мои события CoffeeScript / backbone.js не запускаются?

10 голосов
/ 05 ноября 2010

Я пытаюсь ознакомиться с CoffeeScript и backbone.js, и мне, должно быть, что-то не хватает.

Это CoffeeScript: 

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) и добавление $, все работает как положено. Чего мне не хватает?

Ответы [ 4 ]

7 голосов
/ 05 ноября 2010 
(function () {}).call(this);

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

this.method = function () {};
this.method();

$(function () {}), по крайней мере, в jQuery, является сокращением для 

$(document).ready(function () {})

, которая запускает данную функцию, когда дерево DOM полностью построено. Похоже, что это необходимое условие для правильной работы вашей функции Backbone.View.extend.

5 голосов
/ 07 ноября 2010

Для совместного использования CoffeeScript и jQuery для сценариев приложения поместите код в шаблон такого типа: 

$ = jQuery
$ ->

  MyView = Backbone.View.extend
    events:
      "click": "testHandler"
    testHandler: ->
      console.log "click handled"
      false

  view = new MyView el: $('#test_container')
  view.render()
3 голосов
/ 12 февраля 2011

Попробуйте использовать синтаксис объявления класса CoffeeScript, например: 

class BacklogView extends Backbone.View
  constructor: (@el) ->
    this.delegateEvents this.events

  events:
    "click" : "addStory"

  # callbacks
  addStory: ->
    console.log 'it works!'
2 голосов
/ 05 января 2011

Что происходит, когда представление или, по крайней мере, view.el генерируется динамически?Вы можете вызвать метод view.delegateEvents (), чтобы вручную установить обработчики событий.

Вот аналогичный сценарий coffeescript для отображения ChildView в ParentView и затем делегирования событий childView. 

window.ParentView = Backbone.View.extend
  addOne: (thing) ->
    view = new ChildView({model: thing})
    this.el.append view.render().el 
    view.delegateEvents()
...