facebook twitter hatena line google mixi email

Javascript/backbonejs

提供: 初心者エンジニアの簡易メモ
移動: 案内検索

backbone.jsとは

クライアント用MVC

本体ダウロード

wget http://backbonejs.org/backbone.js

依存jsライブラリ

wget http://underscorejs.org/underscore.js

require順序

<script type="text/javascript" src="lib/underscore.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/json2.js"></script>
<script type="text/javascript" src="lib/backbone.js"></script>
<script type="text/javascript" src="lib/sample.js"></script>

サンプルコード

<html>
<head>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
</head>
<body>
backbone
<script>
var Game = Backbone.Model.extend({
    initialize: function(){
        console.log("init");  // init
    },
    defaults: {
        name: 'Default title',
        releaseDate: 2011,
    }
});
//インスタンス生成
var portal = new Game({ name: "Portal 2", releaseDate: 2011});
//releaseDate属性の取得
console.log(portal.get('releaseDate')); // 2011
//name属性の変更
portal.set({ name: "Portal 2 by Valve"});
console.log(portal.get('name')); // Portal 2 by Valve
</script>
</body>
</html>

参考

http://qiita.com/items/16b799d0ec0a0ae3f78e

http://www.ibm.com/developerworks/jp/web/library/wa-backbonejs/

http://www.s-arcana.co.jp/tech/2011/08/backbonejs-html-view-model.html