backbone.jsでSPA
昨日に引き続き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が非常にわかりやすかったです。