バックボーン。「el」の混乱を表示

ビューはどのように処理する必要がありますelか？設定する必要があります。そうしないと、イベントは発生しません（ここを参照）。

しかし、それはすでにページ上にある要素であるべきでしょうか？私のアプリでは、（jQueryテンプレート）テンプレートをFancyboxにレンダリングします。elその場合、何をすべきでしょうか？

ビューelは、すべてのイベントバインディングが行われる場所です。これを使用する必要はありませんが、バックボーンにイベントを発生させたい場合は、elでレンダリング作業を行う必要があります。ビューelはDOM要素ですが、既存の要素である必要はありません。これは、現在のページからプルしない場合に作成されますが、何かを実行したい場合は、ページに挿入する必要があります。

例：個別のアイテムを作成するビューがあります

window.ItemView = Backbone.View.extend({
    tagName: "li", //this defaults to div if you don't declare it.
    template: _.template("<p><%= someModelKey %></p>"),
    events: {
         //this event will be attached to the model elements in
         //the el of every view inserted by AppView below
        "click": "someFunctionThatDoesSomething"
    },
    initialize: function () { 
        _.bindAll(this, "render");
        this.render();
    },
    render: function () {
        this.el.innerHTML = this.template(this.model.toJSON());
        return this;
    }
});
window.AppView = Backbone.View.extend({
    el: $("#someElementID"), //Here we actually grab a pre-existing element
    initialize: function () { 
        _.bindAll(this, "render");
        this.render(new myModel());
    },
    render: function (item) { 
        var view = new ItemView({ model: item });
        this.el.append(view.render().el);
    }
});

最初のビューは単にリストアイテムを作成し、2番目のビューは実際にそれらをページに配置します。これは、backbone.jsサイトのToDoの例で起こることとかなり似ていると思います。慣習はあなたにエルを満足させることだと思います。したがって、elはテンプレート化されたコンテンツを配置するためのランディングプレースまたはコンテナとして機能します。次に、バックボーンはそのイベントを内部のモデルデータにバインドします。

ビューを作成するときは、使用して4つの方法でエルを操作することができel:、tagName:、className:、とid:。これらのどれも宣言されていない場合、elはデフォルトでidまたはクラスのないdivになります。また、この時点ではページに関連付けられていません。tagNameを使用して、タグを別のタグに変更できます（たとえばtagName: "li"、el ofを与えます<li></li>）。同様に、elのIDとクラスを設定できます。それでも、elはページの一部ではありません。elプロパティを使用すると、elオブジェクトを非常に細かく操作できます。ほとんどの場合、私はel: $("someElementInThePage")これは実際に、ビューでelに対して行うすべての操作を現在のページにバインドします。それ以外の場合、ビューで実行したすべてのハードワークをページに表示するには、ビューの別の場所（おそらくレンダリング）にページを挿入/追加する必要があります。elは、すべてのビューが操作するコンテナーとして考えるのが好きです。

少し古くなりましたが、私も混乱していました。そのため、ここに来た他の人々にとって、このフィドルは役立つかもしれません-http://jsfiddle.net/hRndn/2/

var MyView = Backbone.View.extend({

    events: {
        "click .btn" : "sayHello",
    },

    sayHello : function() {
        alert("Hello");
    },


    render : function() {
        this.$el.html("<input type='button' class='btn' value='Say Hello'></input>");

    }
});

$(function() {
    myView = new MyView({el:"#parent_id"});
    myView.render();
});

'el'が、ビューの変更をトリガーするイベントを持つ子要素を含む要素を参照するようにします。「body」タグと同じ幅にすることができます。