Backbone.js を使ってみた
参考URLとか、雑感とか、ちょっとした使い方とか。
クライアントサイドでMVC！ってことで、Backbone.js を使ったコードを読む機会がったので雑感とかメモとか.
参考URL
- Backbone.js
- Backbone Tutorials
- jQuery Mobileでのアプリケーション開発にBackbone.jsを導入しよう
- Backbone.jsを利用したクライアントサイドMVCの導入についてそろそろ書いておくか
とりあえず必要な underscore.js と backbone.js は Backbone.js の公式で右クリックで保存してきます。あと順番大事です。jQuery を先に読み込みます。これ微妙にはまってました。jQuery は1.4.2以上かな？
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script src="./underscore.js"></script>
<script src="./backbone.js"></script>
[/javascript]
model と collection の関係を試していた例。collection.at(index) とかで Collection 内の model にアクセス出来る。Collection の使い道がいまいちだけど、なんとなく model に順番にアクセスしたいときなんかに使えるんですかね。
$(function(){
var Song = Backbone.Model.extend({
defaults:{
name: "Not specified",
artist: "Not specified"
},
initialize: function(){
//console.log("Music is the answer");
}
});
var Album = Backbone.Collection.extend({
model: Song
});
var song1 = new Song({name: "hoge-", artist: "OMC"});
var song2 = new Song({name: "moge-", artist: "AMC"});
var myAlbum = new Album([song1, song2]);
//console.log(myAlbum.models);
//alert(JSON.stringify(myAlbum));
//alert(myAlbum.at(0).get("name"));//hoge-
//alert(myAlbum.at(1).get("name"));//moge-
});
[/javascript]
次は model と view の関係を試していた例。
$(function(){
var Api = Backbone.Model.extend({
initialize: function(){
},
search: function(args){
var url = "http://search.sample.com/";
url += args;
alert(url);
alert("search!");
},
post: function(){
alert("post!");
},
});
var SearchView = Backbone.View.extend({
events: {
//click イベントを button タグの id:search に付与し、doSearch() が呼ばれる
"click button#search" : "doSearch",
//上と同等
"click button#post" : "doPost"
},
initialize: function(){
},
render: function(){
//var template = _.template( $("#search_template").html(), {} );
//this.el.html( template );
},
doSearch: function(){
alert("doSearch");
this.api.search("a");
this.render();
},
doPost: function(){
alert("doPost");
this.api.post();
this.render();
},
});
var search_view = new SearchView({ el: $("#aclick") });
});
[/javascript]
#aclick がターゲットになってるのでそれに対応する html が以下。
[html]
<div id="aclick">
<button id="search">Search Ajax start!</button>
<button id="post">Post Ajax start!</button>
</div>
[/html]
どれも参考URLのどこかにあったコードを動かしただけです。
ざっくり view でイベントをセットして指定した関数を呼び出して関数の中で model を呼び出して、その内容を render() する感じで MV(C) を実現する。C のコントローラーは アドレスに # 以降が存在しているときに効果を発揮するそうですが、とりあえず使わなそうなので、あまり見てません。。
あとテンプレートの概念があるっぽい。underscore.js に含まれているっぽい。上のコードにも書いてあるけど、以下の部分がソレっぽい。あんまり調べてないけど動的に動く部分があるならテンプレートの機能を使ったほうが良いと思われます。
_.template( $("#search_template").html(), {} )
[/javascript]
感想としては、とりあえずでも使ったほうが読みやすいかも。って感じです。慣れれば読みやすいかも。でも慣れないと読みにくい気がする。チーム開発するならみんなにある程度説明しないといざというときに「えー、よめねえぇえｗｗ」なってしまいそう。
