1. ホーム
  2. javascript

[解決済み] Backbone.Viewの "el "の混乱

2023-01-11 04:50:58

質問

ビューの el はどのように処理されるべきでしょうか? 設定されていなければなりません。そうでなければイベントは発生しません ( はこちら ).

しかし、それはすでにページ上にある要素であるべきでしょうか? 私のアプリでは、(jQuery Templates)テンプレートをFancyboxにレンダリングしています。その際 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番目のビューは実際にページにそれらを配置します。これは ToDo の例 で起こっていることにかなり似ていると思います。私は、コンテンツをelにレンダリングするのが慣例だと考えています。つまり、elはテンプレート化されたコンテンツを置くためのランディング・プレイス、コンテナとして機能する。そして、Backboneはその中のモデルデータにイベントをバインドします。

ビューを作成するとき、次の4つの方法でelを操作することができます。 el: , tagName: , className: そして id: . これらのいずれもが宣言されていない場合、elのデフォルトはidやclassのないdivになります。また、この時点ではページと関連付けられていません。タグを他のものに変更するには、tagNameを使用します(例. tagName: "li" とすると、elは <li></li> ). elにも同様にidとclassを設定することができます。それでもelはページの一部ではありません。elプロパティは、elオブジェクトを非常に細かく操作することができます。たいていの場合、私は el: $("someElementInThePage") を使いますが、これは実際にビューの中でelに対して行ったすべての操作を現在のページにバインドするものです。そうしないと、ビューで行ったすべての作業をページで見たい場合、ビューのどこか他の場所(おそらくレンダー内)で、ページに挿入したり適用したりする必要があります。私は、elはすべてのビューが操作するコンテナであると考えたいと思っています。