Entries

スポンサーサイト

カテゴリ:スポンサー広告
更新日:--------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

backbone.js - ViewとRouterの連携。画面遷移時のViewの扱いって、これでいいのかなぁ?

カテゴリ:backbone.js
タグ: backbone.js 
更新日:2012-12-30
backbone.jsのRouterを試した時には、Routerの機能を確認したかったから、Viewは使わなかった。

> backbone.js - Routerを試す - fintopo

だけど、backbone.jsを使うからには、表示はViewを使うわけだ。で、連携させてみた。

Routerで遷移した時に、Viewを生成してみる。だけど、うまく動かない。最初は表示されても、遷移したときは表示されないとか。

> 画面遷移のあるアプリで、Backbone.Viewを使っていた場合のイベントとか後始末 - Qiita
> Backbone.js 1.0に向けての変更点 - NAVER Engineers' Blog

Viewを単純に生成するのではまずいらしい。

イベントの後始末は、Ver.1.0で対応するらしいが、とりあえずは「Backbone.js 1.0に向けての変更点」にあるdisposeを実装して、dispose、removeを明示的に呼び出すようにした。
var AppRouter = Backbone.Router.extend({
routes: {
'': 'start',
'next': 'next'
},
views: [], // Viewへのポインタを保存する
removeView: function(){ // Viewを削除
_.each(this.views, function(view){
view.dispose().remove();
});
this.views = [];
},
setViews: function(){ // ViewをDOM(body)に登録。
var $main_body = $('body');
$main_body.empty();
_.each(this.views, function(view){
$main_body.append(view.el);
});
},
start: function(){
_this.removeView(); // 切替時には既存のViewを削除
_this.views.push(new App.View.StartView({…}); // Viewを生成して登録
_this.setViews(); // Viewを表示
},
next: function(){
_this.removeView();
_this.views.push(new App.View.NextView1({…});
_this.views.push(new App.View.NextView2({…}); // 複数のViewにも対応
_this.setViews();
}
});
こんな感じ?作法的には、Viewの再生成でいいのかなぁ?
スポンサーサイト

Appendix

プロフィール

いむら@fintopo いむら@fintopo

フリーのシステムエンジニア兼プログラマです。趣味はガーデニングとカメラ。2017年4月にα7IIを買いました。フルサイズ一眼初心者です。

このページのQRコード

季節暦

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。