3

backbone.js で作業を開始しようとしましたが、ビューの el として「body」を使用しないとイベントが機能しないことがわかりました。これがコードです。htmlファイルとして保存して実行できます。

<html>
    <body>
        <button id='openEssay'>test</button>
        <div id='div' style='width:100px;height:100px;'></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script><script>
    (function($){
        var AppView = Backbone.View.extend({

            el:'body',//success
    //fail  el:'#div',
    //fail    tagName: 'li',
    //fail    id:'div',
            initialize:function(){
                _.bindAll(this, 'openEssay');
            },
            events:{
                'click button#openEssay':'openEssay'
            },
            openEssay:function(){
                alert('a');
            }
       });
       var app = new AppView();
    })(jQuery);

    </script>
    </body>
    </html>
4

2 に答える 2

15

Backbone は、 (または古い Backbones では)this.el委任形式を使用して、イベント ハンドラーをビューにバインドします。詳細については、を参照してください。したがって、これらのイベントが必要な場合:ondelegateBackbone.View#delegateEvents

events: {
    'click button#openEssay':'openEssay'
}

何かを行うには、this.$el.find('button#openEssay')何かに一致する必要があります（thisもちろん、ビューオブジェクトはどこですか）。4 回の試行のうちの 1 回のみ:

  1. el: 'body'
  2. el:'#div'
  3. tagName: 'li'
  4. id: 'div'

<button id="openEssay">は中に入れるthis.elので、ボタンを押すと(1)だけが呼び出さopenEssayれます。ボタンを内側に配置すると#div、(2)も機能します。

于 2012-08-20T08:41:54.110 に答える
0

上記の回答は、特にモジュール化に関しては非常に役に立ちました。私の場合、誰でも使用できる View コンポーネントの種を構築しようとしています。しかし、イベントの部分は常に何もしません。それを修正するために、コンポーネント ビュー el: 'body', too easy に入れました。

var RoleView = BaseView.extend({
		el: 'body',
		template : doT.template(RoleTemplate),
		model : new SessionModel(),
		events: {
			"click #open-RoleModal" : "_OpenRoleModal",
            "click #normal-Role": "_makeRole"
        },
		initialize:function(options){
			BaseView.prototype.initialize.call(this,options);
		},
		_OpenRoleModal: function(){
          //it works
		},
        _makeRole : function() {
          //it works
        },
        close: function(){
            this.$el.empty().off();
        }

	});

于 2015-12-29T15:17:23.490 に答える