Warum werden meine Coffeescript / Backbone.js Ereignisse Brennen nicht?

Question

Ich versuche, mich mit Coffeescript und Backbone.js vertraut zu machen, und ich muss etwas fehlen.

Diese Coffee:

MyView  = Backbone.View.extend 
   events: { 
     "click" : "testHandler" 
   } 

   testHandler: -> 
     console.log "click handled" 
     return false 

 view = new MyView {el: $('#test_container')} 
 view.render()

Erzeugt das folgende 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);

Aber das click Ereignis nicht Feuer testHandler, wenn ich in test_container klicken.

Wenn ich die Ausgabe JavaScript ändern:

$(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;
});

Das Entfernen der call(this) und Anhängen des $, funktioniert alles wie erwartet. Was bin ich?

Answer 1

(function () {}).call(this);

ist nur ein Weg, um sofort invoke eine anonyme Funktion, während ein Empfänger angibt. Es funktioniert im Grunde dieselbe Art und Weise wie:

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

$(function () {}), zumindest in jQuery, ist eine Abkürzung für

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

, die die gegebene Funktion ausgeführt wird, wenn der DOM-Baum vollständig aufgebaut wurde. Es scheint, als ob diese richtig die notwendige Bedingung für Ihre Backbone.View.extend Funktion zur Arbeit ist.

Answer 2

Für Coffeescript und jQuery zusammen für Anwendungsskripts verwenden, setzen Sie den Code in dieser Art von Vorlage:

$ = jQuery
$ ->

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

  view = new MyView el: $('#test_container')
  view.render()

Answer 3

Versuchen Coffeescript Klassendeklaration Syntax, z.

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

  events:
    "click" : "addStory"

  # callbacks
  addStory: ->
    console.log 'it works!'

Answer 4

Was passiert, wenn die Ansicht, oder zumindest view.el dynamisch generiert? Sie können die view.delegateEvents () -Methode aufrufen, um manuell die Eventhandler gesetzt.

Hier ist ähnlich Coffeescript für eine ChildView in einem ParentView dann macht den childView der Ereignisse zu delegieren.

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