Entries

スポンサーサイト

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

backbone.js - Routerを試す

カテゴリ:backbone.js
タグ: backbone.js  ajax 
更新日:2012-12-26
backbone.js をお試し中。

> 正月休みは、backbone.js を試してみようかな。 - fintopo
> backbone.js - まずはViewとModelとの連携をやってみた。 - fintopo
> backbone.js - Modelの永続化を試す。 - fintopo
> backbone.js - Modelの永続化。レガシーAPIへの対応。 - fintopo

今回は、Router。参考にしたのは、以下のサイト。

> Backbone.js入門 「Router と History」 - Qiita
> 作って覚える Backbone.js (2) Router 編 - present
> backbone.jsでフラグメントがない場合は#homeに遷移させる - brainstorm

Ajaxでページ遷移もどきをした場合、ブラウザの戻るボタンで予想外の画面に移動しちゃうことがある。ブラウザに履歴がないためだけど、フラグメントを使って、それを補う仕組みらしい。

Ajax内での移動が履歴されるのはいいけど、代わりにエントリポイントができちゃうってことでもある。不整合ができないようにチェックするしか無いのだろうなぁ。

以下は、Menuをクリックすると、対応するブロックを表示するサンプル。

<script type="text/javascript">
$(function(){
MyRouter = Backbone.Router.extend({
routes: {
'view:num': 'view'
},
view: function (num) {
$('div').hide();
$('.view'+num).show();
}
});
var router = new MyRouter();
$('.menu').click(function(){
var num = $(this).data('num');
router.navigate('view' + num, true);
});
$('div').hide();
Backbone.history.start();
});
</script>
<ul>
<li class="menu" data-num="1" >Menu1</li>
<li class="menu" data-num="2" >Menu2</li>
<li class="menu" data-num="3" >Menu3</li>
</ul>
<div class="view1">View1</div>
<div class="view2">View2</div>
<div class="view3">View3</div>

これでbackbone.jsの機能は、ひと通り学習できたのかな?
とはいえ、使えるようにするには、まだまだ試したり、考えたりしないといけない。
私は実践あるのみ、と思っているので、何か実用的なアプリを組んでみるのが常。
アイデアはいくつかあるけど、さて、どれにしようか・・・
スポンサーサイト

Appendix

プロフィール

いむら@fintopo いむら@fintopo

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

このページのQRコード

季節暦

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