Backbone.jsのViewで「el」を指定する方法「tagName,id」を指定する方法 #JavaScript

最近、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

index.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)の場合）

HeaderView.js

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>」となる。

AppView.js

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内の

index.html

<div id="content"></div>

を

index.html

<div id="content">
    <div id='cnt-index'>
        ページＡ
        ....
    </div>
</div>

のように書き換えることができる。
別のViewで同じようにすれば

index.html

<div id="content">
　　<div id='cnt-next'>
        ページB
        ....
    </div>
</div>

のようにcontent内を書き換えられる。

el: $("#content"),
のように指定して中身をページAとBで切り替えればいいじゃんと、最初は思ってたけど、elが同じだと、ページAで設定したイベントがページBでも動いてしまうので、このように新しくelを作る方法で作ってみました。。。