3

私は現在、次のhtmlファイルを持っています：

<div class="button1">

    <button class="first" id="up" onclick="tranistionUp">
       Go Up
    </button>

    <button class="last" id="down" onclick="tranistionDown">
       Go Down
    </button>
</div>

私はbackbone.jsビューファイルに次のものがあります：

var BlahView = BackBone.View.extend({
  initialize:function(){},
  blah...
  blah...
 transitionUp: function(){
    blah...
 },
 tranistionDown: function(){
},
render:function (){
    blah....
}; 
});

ボタンをクリックすると、両方の関数で未定義の関数エラーが表示されます。バックボーンを使用するのは初めてです。

4

1 に答える 1

25

でイベントハンドラーをセットアップすることになっていますBackbone.View。

HTML (id="myButtons"コンテナに追加div)

<div class="button1" id="myButtons">
  <button class="first" class="button-up">Go Up</button>
  <button class="last" class="button-down">Go Down</button>
</div>

JavaScript (追加events)

var BlahView = Backbone.View.extend({

  events: {
    "click .button-up": "transitionUp",
    "click .button-down": "tranistionDown",
  },

  transitionUp: function() {
    console.log("Transition up");
  },

  tranistionDown: function() {
    console.log("Transition down")
  }

});

var blahView = new BlahView({ el: $('#myButtons') });

属性を指定することによりonclick、ブラウザは関数がグローバル スコープで呼び出されることtransitionUpを期待します。transitionDownメソッドはオブジェクトで定義されます。特にバックボーンを使用している場合は、HTML 属性を使用してイベント ハンドラーをバインドすることはお勧めしません (ビューの特定のインスタンスにイベントを簡単にバインドできないため)。

于 2012-05-21T04:17:28.887 に答える