今回は、Backbone.jsで、
単一要素(ボタン、テキストボックス、リンク)を作成します。
Backbone.jsとは、JavaScriptライブラリの一つで、
クライアントサイドのMVCフレームワーク機能を提供します。
Backbone.js のMVCは下記の通りです。
Model
・Backbone.Model … データの保持、更新、Ajax通信など
・Backbone.Collection … Backbone.Modelのリスト化、追加、削除、並び替えなど
View
・Backbone.View … イベントハンドリング、DOM操作など
Controller
・Backbone.Router … URLの監視
・Backbone.History … Routerの履歴監視
Controller はシングルページアプリケーションで
有効な機能ですので、そうではないアプリケーション
例えば、HTMLファイルでページが分かれているような
アプリケーションでは必要ではありません。
今回読者の対象は下記の通りです。
・JavaScriptやjQueryを触ったことがある人
・シングルページアプリケーションに興味がある人
■準備
今回使用する環境は下記の通りです。
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/
それでは、Viewから作成します。
まずは、HTMLファイル(index.html)を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js sample</title>
<script src="../../lib/jquery-2.1.1.js"></script>
<script src="../../lib/underscore.js"></script>
<script src="../../lib/backbone.js"></script>
<script src="main.js"></script>
</head>
<body></body>
</html>
HTMLファイルのhead部分に、JavaScriptライブラリを読み込みます。
Backbone.js は、jQuery及び Underscore.jsを前提に動作しますので、
必ずこの順番で読み込みます。
最後に、main.js を読み込みます。今後はこのファイルを編集していきます。
■デフォルトView
【デモはこちら (※何も表示されません。FireBugのHTML解析で確認ください。)】
【ソースファイルはこちら】
main.js に下記の内容を記述します。
$(function() {
var SampleView = Backbone.View.extend({}); // (1)
var sampleView = new SampleView(); // (2)
$('body').append(sampleView.el); // (3)
});
(1)Backbone.jsのViewは、Backbone.View.extend()関数を使用します。
この関数の引数に、プロパティや関数を設定することでViewを定義します。
ここでは、何も設定していません。
(2)new することで、Viewのオブジェクトを生成します。
(3)bodyに対して、Viewオブジェクトのel要素を追加します。
FireBugでbodyの構成を見てみると、
divタグが追加されていることがわかります。
<div></div>
■カスタムView
【デモはこちら】
【ソースファイルはこちら】
次に、Viewにプロパティを設定します。
$(function() {
var SampleView = Backbone.View.extend({
tagName : 'input', // (1)
className : 'class_input', // (2)
id : 'id_input', // (3)
attributes : { // (4)
type : 'button',
value : '更新'
}
});
var sampleView = new SampleView();
$('body').append(sampleView.el);
});
(1)｢tagName｣には、タグ名を設定します。
(2)｢className｣には、スタイルシートのクラス名を設定します。
(3)｢id｣には、IDを設定します。
(4)｢attributes｣には、属性を設定します。
tagName、className、id、attributes は、Backbone.jsで予約されているプロパティ名です。
bodyには、inputタグが追加されています。
<input id="id_input" class="class_input" type="button" value="更新">
■Viewのイベント
【デモはこちら】
【ソースファイルはこちら】
ボタンをクリックしたときの処理を作成します。
$(function() {
var SampleView = Backbone.View.extend({
tagName : 'input',
className : 'class_input',
id : 'id_input',
attributes : {
type : 'button',
value : '更新'
},
events : {
'click' : 'onClick' // (1)
},
onClick : function(event) { // (2)
console.log('onClick');
}
});
var sampleView = new SampleView();
$('body').append(sampleView.el);
});
(1)｢events｣には、イベント名と関数名を記述することで、イベントを監視します。
(2)クリックしたときの関数を作成します。
eventsも、Backbone.jsで予約されているプロパティ名です。
クリックしたときに、onClick関数が実行されて
コンソールログが出力します。
■Viewのイベントの集約
【デモはこちら】
【ソースファイルはこちら】
eventsプロパティには、複数設定することができます。
$(function() {
var SampleView = Backbone.View.extend({
tagName : 'input',
className : 'class_input',
id : 'id_input',
attributes : {
type : 'button',
value : '更新する'
},
events : {
'click' : 'onClick',
'mouseover' : 'onMouseover', // (1)
'mouseleave' : 'onMouseleave' // (2)
},
onClick : function(event) {
console.log('onClick');
},
onMouseover : function(event) {
console.log('onMouseover');
},
onMouseleave : function(event) {
console.log('onMouseleave');
}
});
var sampleView = new SampleView();
$('body').append(sampleView.el);
});
(1)マウスオーバーしたときに、onMouseover 関数が実行されます。
(2)マウスが離れたときに、onMouseleave 関数が実行されます。
■テキストボックス
【デモはこちら】
【ソースファイルはこちら】
テキストボックスを作成します。
$(function() {
var SampleView = Backbone.View.extend({
tagName : 'input',
className : 'class_input',
id : 'id_input',
attributes : {
type : 'text'
},
events : {
'change' : 'onChange' // (1)
},
onChange : function(event) {
console.log('onChange');
}
});
var sampleView = new SampleView();
$('body').append(sampleView.el);
});
(1)フォーカスが外れたときに、onChange 関数が実行されます。
■リンク
【デモはこちら】
【ソースファイルはこちら】
リンクを作成します。
$(function() {
var SampleView = Backbone.View.extend({
tagName : 'a',
className : 'class_a',
id : 'id_a',
attributes : {
href : 'javascript:void(0)' // (1)
},
events : {
'click' : 'onClick' // (2)
},
render : function() {
this.$el.html('これは、リンクです'); // (3)
return this;
},
onClick : function(event) {
console.log('onClick');
}
});
var sampleView = new SampleView();
$('body').append(sampleView.render().el); // (4)
});
(1)href属性を｢javascript:void(0)｣に設定して、勝手にリンクが実行されることを抑制します。
(2)クリックすると、onClick関数が実行されます。
(3)render関数にて、リンクに表示する文字列を設定します。
(4)render関数を呼び出してからel要素をbodyに追加しています。
render関数は、Backbone.jsで予約されている関数ではありませんが、
jQuery関数のappend()やhtml()を使用する処理を render関数に実装します。
また、el要素をbodyに追加するときに、render関数も繋げれて呼び出せるように
｢return this｣を記述しています。
render関数は、Backbone.jsのデザインパターンの一つです。
以上です。