WebアプリケーションのJavaScriptフレームワークにBackboneを使っている方は多いです。そしてPhoneGap/Cordovaをはじめとするスマートフォンアプリや、スマートフォン向けWebアプリケーションでもそのままBackboneを使いたいと思うでしょう。
スマートフォンの場合に問題になるのは画面遷移です。やはりプッシュしていく画面遷移のがネイティブっぽくなります。そこで使ってみたいのがBackStackです。

BackStackの使い方

動画のが分かりやすいと思いますので、ぜひこちらをご覧ください。

コードとしては以下のようになります。

var FirstView = Backbone.View.extend({  
 events: {  
 'click #btnNext': 'btnNext\_clickHandler'  
 },  
 render: function() {  
 this.$el.html('

FirstView: Hello BackStack!

<button id="btnNext">Next View</button>');  
 return this;  
 },  
 btnNext\_clickHandler: function(event) {  
 stackNavigator.pushView(SecondView);  
 }  
});  
var SecondView = Backbone.View.extend({  
 events: {  
 'click #btnPrev': 'btnPrev\_clickHandler'  
 },  
 initialize:function() {  
 this.on('viewActivate', this.this\_viewActivateHandler, this);  
 },  
 render: function() {  
 this.$el.html('

SecondView: This is a second view!

<button id="btnPrev">Pop this View</button>');  
 return this;  
 },  
 btnPrev\_clickHandler: function(event) {  
 var fade = new BackStack.FadeEffect();  
 stackNavigator.popView(fade);  
  
 },  
 this\_viewActivateHandler: function(event) {  
 alert('SecondView activated!');  
 }  
});  
var stackNavigator = new BackStack.StackNavigator({  
 el: '#container'  
});  
stackNavigator.pushView(FirstView);  

stackNavigatorが肝になります。そこにpushViewすることで、コンテンツが表示されます。その際にはrenderが呼ばれるので、その中でコンテンツを作る形です。画面を戻る場合にはpopViewを使いつつ、アニメーションを指定します。

BackStackを使うと画面周りの取り回しがとても簡単になりそうですね。

BackStackはJavaScript製、Backbone用のオープンソース・ソフトウェア（Apache License 2.0）です。

BackStack demo page
pwalczyszyn/backstack