Backbone.js入門その1〜Model

ファイル読み込み

<script
src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
　<script
src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script
src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>

Modelオブジェクト生成

var model = new Backbone.Model();
console.log(model); // g.Model {cid: "c1", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}

独自モデル定義

var MyModel = Backbone.Model.extend({
    method1: function () {
        console.log('method1');
    },
    method2: function () {
        console.log('method2');
    }
});
var myModel = new MyModel();
myModel.method1();
myModel.method2();

staticメソッド定義

var MyModel = Backbone.Model.extend(/* instance methods */ {
    method1: function () {
        console.log('method1');
    },
    method2: function () {
        console.log('method2');
    }
}, /* static methods */  {
    staticMethod: function() {
        console.log('staticMethod');
    }
});
var myModel = new MyModel();
myModel.method1();
myModel.method2();
MyModel.staticMethod();

属性設定

var model = new Backbone.Model();
model.set('foo', 1);
model.set('bar', 'a');
model.set({a: 100, b: 200});

console.log(model.get('foo')); // 1
console.log(model.get('bar')); // a
console.log(model.get('hoge')); // undefined
console.log(model.get('a')); // 100
console.log(model.get('b'))  // 200
console.log(model.toJSON()); // Object {foo: 1, bar: "a", a: 100, b: 200}

初期値設定

var model = new Backbone.Model({c: 'x', d: 'y'});
model.set({a: 100, b: 200})

console.log(model.get('a')); // 100
console.log(model.get('b')); // 200
console.log(model.get('c')); // x
console.log(model.get('d')); // y
console.log(model.toJSON()); // Object {c: "x", d: "y", a: 100, b: 200} 

初期処理

var MyModel = Backbone.Model.extend(/* instance methods */ {
    initialize: function (params) {
        this.set('message', 'Hello ' + this.get('name') + '!');
    },
    hello: function () {
        console.log(this.get('message'));
    }
});
var myModel = new MyModel({name: 'Backbone.js'});
myModel.hello(); // Hello Backbone.js!

独自コンストラクタ

var MyModel = Backbone.Model.extend({
    constructor: function (name) {
        var message = 'Hello ' + name + '!';
        Backbone.Model.prototype.constructor.call(this, {message: message});
    },
    hello: function () {
        console.log(this.get('message'));
    }
});
var myModel = new MyModel('Backbone.js');
myModel.hello(); // Hello Backbone.js! 

デフォルト値設定

 var MyModel = Backbone.Model.extend({
    defaults: {
        name: 'World'
    },
    initialize: function (params) {
        this.set('message', 'Hello ' + this.get('name') + '!');
    },
    hello: function () {
        console.log(this.get('message'));
    }
});
var myModel0 = new MyModel();
myModel0.hello(); // Hello World!

var myModel = new MyModel({name: 'Backbone.js'});
myModel.hello(); // Hello Backbone.js!

デフォルト値の継承

var MyModel = Backbone.Model.extend({
    defaults: {
        name: 'World'
    },
    initialize: function (params) {
        this.set('message', 'Hello ' + this.get('name') + '!');
    },
    hello: function () {
        console.log(this.get('message'));
    }
});

var MyChild = MyModel.extend({
    defaults: {
        a: 1
    }
});

var myModel0 = new MyChild();
console.log(myModel0.toJSON()); // Object {a: 1, message: "Hello undefined!"}
myModel0.hello(); // Hello undifined!

var myModel = new MyChild({name: 'Backbone.js'});
console.log(myModel.toJSON()); // Object {name: "Backbone.js", a: 1, message: "Hello Backbone.js!"} 
myModel.hello(); // Hello Backbone.js!

親のdefaultsが上書きされてしまっている。underscore.jsの _.extend を使えば良い。

var MyModel = Backbone.Model.extend({
    defaults: {
        name: 'World'
    },
    initialize: function (params) {
        this.set('message', 'Hello ' + this.get('name') + '!');
    },
    hello: function () {
        console.log(this.get('message'));
    }
});

var MyChild = MyModel.extend({
    defaults: _.extend({
        a: 1
    }, MyModel.prototype.defaults)
});

var myModel0 = new MyChild();
console.log(myModel0.toJSON()); // Object {a: 1, name: "World", message: "Hello World!"}
myModel0.hello(); // Hello world!

var myModel = new MyChild({name: 'Backbone.js'});
console.log(myModel.toJSON()); // Object {name: "Backbone.js", a: 1, message: "Hello Backbone.js!"}
myModel.hello(); // Hello Backbone.js!

↓の写経に近いですが・・