backbone.jsでSPA - fnwiya's quine

昨日に引き続きbackbone.jsです。
今日は

に取り組みました。

メモ

js/app.jsで各パーツごとに呼び出すファイルを指定。

MyApp.App = Backbone.View.extend({

  el: '#app',

  tmpl: MyApp.Templates.layout,

  initialize: function () {

    this.$el.html(this.tmpl());

    this.history = new MyApp.Views.History({
      el: this.$el.find('#history_list')
    });

    this.searchBar = new MyApp.Views.SearchBar({
      el: this.$el.find('#header')
    });

    this.tabs = new MyApp.Views.Tabs({
      el: this.$el.find('#search_results')
    });

    this.footer = new MyApp.Views.Footer({
      el: this.$el.find('#footer')
    });

  }

});

new MyApp.App();

上で呼ばれるうちの一つjs/views/footer.js
テンプレートを埋め込む

MyApp.Views.Footer = Backbone.View.extend({

  tmpl: MyApp.Templates.footer,

  initialize: function() {
    this.$el.html(this.tmpl());
  }

});

全体の構造はこんな感じで

<header id="header-wrap">
 <div id="header-container">
    <div id="header">
    </div>
  </div>
</header>

<div id="container">

  <div id="history">
    <div id="history_title"></div>
    <div id="history_list"></div>
  </div>

  <div id="search_results">
  </div>

</div>

<footer id="footer-wrap">
  <div id="footer-container">
    <div id="footer"></div>
  </div>
</footer>

↑の<div id="footer"></div>の部分に
hbs/footer.hbsの中身が埋め込まれる。

イベントの流れはgithubのreadmeが非常にわかりやすかったです。