今回は、Backbone.jsで、
複数要素(2つのボタン、プルダウン)を作成します。
今回使用する環境は下記の通りです。
Webブラウザ
・Mozilla Firefox (v34.05) https://www.mozilla.org/ja/firefox/new/
・FireBug (v2.0.7) https://addons.mozilla.org/ja/firefox/addon/firebug/
JavaScriptライブラリ
・Backbone.js (v1.1.2) http://backbonejs.org/
・Underscore.js (v1.7.0) http://underscorejs.org/
・jQuery (v2.1.1) http://jquery.com/
■2つのボタン (タグ文字列を追加)
【デモはこちら】
【ソースファイルはこちら】
main.js に下記の内容を記述します。
$(function() {
var SampleView = Backbone.View.extend({
events : {
'click #id_button_update' : 'onClickUpdate', // (1)
'click #id_button_delete' : 'onClickDelete', // (2)
},
render : function() { // (3)
this.$el.append('<input id="id_button_update" class="cls_button_update" type="button" value="更新"><input id="id_button_delete" class="cls_button_delete" type="button" value="削除">');
return this;
},
onClickUpdate : function() {
console.log('onClickUpdate');
},
onClickDelete : function() {
console.log('onClickDelete');
}
});
var sampleView = new SampleView();
$('body').append(sampleView.render().el);
});
(1)｢id_button_update｣のボタンをクリックしたときに、onClickUpdate関数が実行されます。
要素が複数ある場合は、IDまたは、スタイルのクラスを指定します。
IDを指定する場合は、ID名に｢#｣を付与します。
スタイルのクラスを指定する場合は、クラス名に｢.｣を付与します。下記の通りです。
events : {
'click .cls_button_update' : 'onClickUpdate',
'click .cls_button_delete' : 'onClickDelete',
},
(2)｢id_button_delete｣のボタンをクリックしたときに、onClickDelete関数が実行されます。
(3)Viewオブジェクトに2つ以上の要素を追加する場合は、
｢this.$el.append()｣で、自分のViewに対して、要素を追加します。
render関数は下記のように書くこともできます。
【デモはこちら】
【ソースファイルはこちら】
render : function() {
this.$el.append($('<input/>', {
'id' : 'id_button_update',
'type' : 'button',
'value' : '更新'
})).append($('<input/>', {
'id' : 'id_button_delete',
'type' : 'button',
'value' : '削除'
}));
return this;
},
■2つのボタン (テンプレートを追加)
【デモはこちら】
【ソースファイルはこちら】
自分のViewに対して、要素に追加する場合、
タグの文字列を指定しましたが、要素が複雑になると、
タグの文字列の内容を把握することが困難になります。
そこで、Underscore.js のテンプレートエンジンを使用します。
まずは、index.htmlのheadに以下の内容を追加します。
これが、Viewに追加する要素となるテンプレート用のHTMLになります。
<script type="text/template" id="template-buttons">
<input id="id_button_update" type="button" value="更新">
<input id="id_button_delete" type="button" value="削除">
</script>
次に、main.js に下記の内容を記載します。
$(function() {
var SampleView = Backbone.View.extend({
events : {
'click #id_button_update' : 'onClickUpdate',
'click #id_button_delete' : 'onClickDelete',
},
initialize : function() {
this.compiledTemplate = _.template($('#template-buttons').text()); // (1)
},
render : function() {
this.$el.append(this.compiledTemplate()); // (2)
return this;
},
onClickUpdate : function(event) {
console.log('onClickUpdate');
},
onClickDelete : function(event) {
console.log('onClickDelete');
}
});
var sampleView = new SampleView();
$('body').append(sampleView.render().el);
});
(1)initialize関数は、Backbone.Viewの予約されている関数です。
Viewオブジェクトをnewするときに呼ばれる関数です。
ここで、テンプレートのIDを指定して、Underscore.jsの_.template()を実行します。
コンパイルされたテンプレート関数が this.compiledTemplate に格納されます。
(2)render関数で、自分のViewに this.compiledTemplate を追加します。
■プルダウン
【デモはこちら】
【ソースファイルはこちら】
テンプレートを使用してプルダウンを作成します。
まず、index.htmlのheadに以下の内容を追加します。
<script type="text/template" id="template-programing">
<label for="language"><%= title %></label>
<select id="language">
<option value="<%= value.option1 %>"><%= label.option1 %></option>
<option value="<%= value.option2 %>"><%= label.option2 %></option>
<option value="<%= value.option3 %>"><%= label.option3 %></option>
<option value="<%= value.option4 %>"><%= label.option4 %></option>
<option value="<%= value.option5 %>"><%= label.option5 %></option>
</select>
</script>
次に、main.js に下記の内容を記載します。
$(function() {
var SampleView = Backbone.View.extend({
events : {
'change #language' : 'onChange'
},
initialize : function() {
this.compiledTemplate = _.template($('#template-programing').text());
},
render : function() {
var data = { // (1)
'title' : 'プログラミング言語を選択してください',
'label' : {
'option1' : 'JavaScript',
'option2' : 'Java',
'option3' : 'C言語',
'option4' : 'Ruby',
'option5' : 'Python'
},
'value' : {
'option1' : '1',
'option2' : '2',
'option3' : '3',
'option4' : '4',
'option5' : '5'
}
};
this.$el.append(this.compiledTemplate(data)); // (2)
return this;
},
onChange : function(event) {
console.log('onChange:' + event.target.value);
}
});
var sampleView = new SampleView();
$('body').append(sampleView.render().el);
});
Underscore.jsのテンプレートでは、
HTMLの中に、<%= title %> と指定すると、titleのプロパティ値が出力されます。
(1) テンプレートで出力するオブジェクトを設定します。
(2) this.compiledTemplate 関数の引数に(1)のオブジェクトを引数で渡します。
以上です。
□過去の記事
Backbone.js入門その1｢Backbone.Viewで1つの要素を作る｣
