10

私は 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イベントが発生しません。testHandlertest_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

4 に答える 4

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

レシーバーを指定しながら匿名関数をすぐに呼び出す方法にすぎません。基本的に次のように動作します。

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

$(function () {})、少なくともjQueryでは、の省略形です

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

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

于 2010-11-05T17:38:09.583 に答える
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()
于 2010-11-07T14:49:23.023 に答える
3

たとえば、CoffeeScript クラス宣言構文を使用してみてください。

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

  events:
    "click" : "addStory"

  # callbacks
  addStory: ->
    console.log 'it works!'
于 2011-02-11T21:58:42.793 に答える
2

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

これは、ParentView で ChildView をレンダリングし、childView のイベントを委任するための同様の coffeescript です。

window.ParentView = Backbone.View.extend
  addOne: (thing) ->
    view = new ChildView({model: thing})
    this.el.append view.render().el 
    view.delegateEvents()
于 2011-01-05T04:54:46.417 に答える