ソースコード
前回の記事に引き続き、Collectionを使ってみた。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>こんにちは。動物さん</title>
<!-- テンプレート作成 -->
<script type="text/template" id="animal-template">
<div>
こんにちは。<b><%- name %>ちゃん。</b>(<%- species %>)
</div>
</script>
<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>
</head>
<body>
<h3>こんにちは。動物さん。</h3>
<div id="myList"></div>
<script type="text/javascript">
(function() {
//----------
// Model作成
//----------
var Animal = Backbone.Model.extend({
//Attribute(属性)
defaults: {
species: "Animal",
name: "None"
},
//コンストラクタ
initialize: function(){
console.log("初期化処理 : " + this.get("species"));
},
//メソッド
call: function(){
console.log("動物 : " + this.get("species"));
console.log("私の名前は" + this.get("name") + "です。");
}
});
//Animal Collection のインスタンス化
//---------------
// Collection作成
//---------------
var Animals = Backbone.Collection.extend({
model: Animal
});
var animals = new Animals([
{species: "猿", name: "えて吉"},
{species: "鳥", name: "ピーコ"},
{species: "牛", name: "モン助"},
{species: "蛙", name: "けろっぴ"},
{species: "馬", name: "馬之介"}
]);
//----------
// View作成
//----------
var BaseView = Backbone.View.extend({
tagName: "div",
className: "myDivClass",
//テンプレート作成
template: _.template($('#animal-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
//イベント定義
events: {
"click": "call"
},
//イベント実装
call: function(){
alert(this.model.get("name"));
}
});
//Collection の展開
animals.each(function(animal){
var animalDiv = new BaseView({model: animal});
$('#myList').append(animalDiv.render().el);
});
})();
</script>
</body>
</html>
Collectionをeachで回して、ViewのModelとしてインスタンス化して、対象の<div>へ追加してあげる感じ。
実行結果
Collectionに登録されたModelがViewに追加されている。前回と同様ViewにはEventsが設定されている。という流れかな?
手を動かしているうちに、何となくだがMVCの役割と処理の流れが理解できるようになってきた。
まだまだelの理解が不十分であるが・・・。