必要になったのと興味もあった為、Backbone.jsを始めてみた。
そのHTMLテンプレートの覚え書き。サンプルで良く見かける動物クラスのパターン。
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello Backbone.js</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
<script type="text/javascript">
(function() {
//Model作成
var Animal = Backbone.Model.extend({
//デフォルトプロパティ
defaults: {
species: "Animal",
name: "None"
},
//コンストラクタ
initialize: function(){
console.log("初期化処理 : " + this.get("species"));
},
//コンストラクタ(※間違い)
// constructor: function(){
// console.log("初期化処理 : " + this.get("species"));
// },
//メソッド
call: function(){
console.log("動物 : " + this.get("species"));
console.log("私の名前は" + this.get("name") + "です。");
}
});
//Animalのインスタンス化
var none = new Animal();
//Animal(犬)のインスタンス化
var dog = new Animal({
species: "犬",
name: "ポチ"
});
//Animal(猫)のインスタンス化
var cat = new Animal({
species: "猫",
name: "タマ"
});
//console.log(dog);
//console.log(cat);
console.log(none.toJSON());
console.log(dog.toJSON());
console.log(cat.toJSON());
none.call();
dog.call();
cat.call();
})();
</script>
</head>
<body>
<h3>Backbone.js</h3>
</body>
</html>
疑問点
-
コンストラクタを定義した場合、
callメソッド内で、プロパティを取得しようとthis.get("name")するとエラーとなる。 -
コンストラクタを定義した場合、
dog.toJSON()をコールするとエラーとなる。コンストラクタまでは、JSON化できないからかな？ でも、メソッドfunction()と変わらない気がするが・・・。
別の機会に検証しようと思う。
※※※追記 2014/09/18※※※
- コンストラクタの定義の仕方が間違っていました。
constructor:ではなく、initialize:です。
//コンストラクタ(※間違い)
constructor: function(){
console.log("初期化処理");
},
//コンストラクタ
initialize: function(){
console.log("初期化処理");
},