10


7

CoffeeScript / backbone.jsイベントが発生しないのはなぜですか?

私は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);

しかし、 test_container`をクリックすると、 click`イベントは `testHandler`を起動しません。

出力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 Answer


7


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

これは、レシーバを指定しながら匿名関数をすぐに呼び出すための単なる方法です。 基本的にこれと同じように機能します:

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

少なくともjQueryでは、 `$(function(){})`は

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

DOMツリーが完全に構築されたときに、指定された関数を実行します。 これは、 `Backbone.View.extend`関数が適切に機能するために必要な条件のようです。


5


アプリケーションスクリプトで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


CoffeeScriptクラス宣言構文を使用してみてください、例:

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

  events:
    "click" : "addStory"

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


2


ビュー、または少なくともview.elが動的に生成されるとどうなりますか? view.delegateEvents()メソッドを呼び出して、イベントハンドラーを手動で設定できます。

ParentViewでChildViewをレンダリングし、childViewのイベントを委任するための同様のコーヒースクリプトを次に示します。

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