最近、Backbone.jsを使ってシングルページアプリを作ろうと試行錯誤中・・・
そんな中、Viewについて自分なりに理解したことをメモ
今回作ったサンプル
https://github.com/JK0602/backbone_single_page
こんな感じのページ・・・デザインは・・・サンプルなので。。。
chromeだとローカルファイルへのアクセスを許可するために、設定が必要...
http://www.finefinefine.jp/web/jquery/kiji861/
Viewのelを指定する方法は2通りある
(1).既に存在しているDOMエレメントをelに指定する
(2).新しくelを作る場合
以下はサンプル内で使用しているベースのHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="css/common.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/lib/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="wrapper">
<!-- ヘッダー -->
<div id="header"></div>
<!-- メインコンテンツ -->
<div id="content"></div>
<!-- フッター -->
<div id="footer"></div>
</div>
</body>
</html>
ヘッダーは既にindex.htmlで存在している「<div id="header"></div>」を以下のように、
el: $("#header"),
としてelに指定した。（(1)の場合）
var HeaderView = Backbone.View.extend({
el: $("#header"), //←既に存在するDOMエレメントを指定
//以下イベント登録など
events: {
...
});
そして、コンテンツ内（<div id="content"></div>）はページAとページBの内容で切り替えたかったので、tagNameとidを指定することで、elを新しく作ることにした。（(2)の場合）
tagName: "div",
id: "cnt-index",
こうすることで、
this.elが「<div id='cnt-index'></div>」となる。
var AppView = Backbone.View.extend({
tagName: "div", //←新しくelを作る場合
id: "cnt-index",
template: null,
//イベント登録など
...
//描画
render: function(){
this.$el.html(this.template());
$("#content").html(this.el);
...
return this;
},
});
上記の描画の部分で、
$("#content").html(this.el);
とすることで、index.html内の
<div id="content"></div>
を
<div id="content">
<div id='cnt-index'>
ページＡ
....
</div>
</div>
のように書き換えることができる。
別のViewで同じようにすれば
<div id="content">
<div id='cnt-next'>
ページB
....
</div>
</div>
のようにcontent内を書き換えられる。
el: $("#content"),
のように指定して中身をページAとBで切り替えればいいじゃんと、最初は思ってたけど、elが同じだと、ページAで設定したイベントがページBでも動いてしまうので、このように新しくelを作る方法で作ってみました。。。