---
title: Backbone.js入門その1〜Model
tags: []
categories: ["Programming", "JavaScript", "Framework", "Backbone"]
date: 2013-03-10T05:45:04Z
updated: 2012-03-10T05:45:04Z
---
### ファイル読み込み
### 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!
↓の写経に近いですが・・
