[解決済み] Backbone.Viewの "el "の混乱
質問
ビューの
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はすべてのビューが操作するコンテナであると考えたいと思っています。
関連
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] CSSは常にJavascriptより優先されるべきか?
-
[解決済み] Chrome DevToolsで要素に発生したイベントを表示するにはどうすればよいですか?
-
[解決済み] Reactコンポーネント外でのクリックを検出する
-
[解決済み] HTMLの "no-js "クラスは何のためにあるのですか?
-
[解決済み] 部分テンプレートとテンプレートの複雑なネスト
-
[解決済み】Grunt、NPM、Bowerの違い( package.json vs bower.json )
-
[解決済み】Rails 4:ターボリンクで$(document).ready()を使用する方法
-
[解決済み] Backbone.jsでサブビューの初期化およびレンダリングを処理するには?
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSのDateからDay名
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?