web-dev-qa-db-ja.com

Backbone.View「el」の混乱

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

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

javascriptbackbone.jsbackbone-views
97
Manuel Meurer

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

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

_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は、テンプレート化されたコンテンツを配置するための着陸場所またはコンテナとして機能します。バックボーンは、イベントを内部のモデルデータにバインドします。

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

121
LeRoy

少し古いですが、私も混乱していたので、ここに来る他の人にとっては、このフィドルが役立つかもしれません- 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();
});
6
Mark

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

1
joshvermaire