Backbone.js でシンプルなViewを作成するコードを紹介します。
プログラム1:なにもしないView
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.2.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script type="text/javascript">
$(function () {
var CView = Backbone.View.extend({
});
var mView = new CView;
$('#output').append(mView.el);
});
</script>
</head>
<body>
<div>Header</div>
<div id="output"></div>
<div>Footer</div>
</body>
</html>
解説
var CView = Backbone.View.extend({
});
上記のコードがビューのオブジェクトになります。今回のコードでは何も実装していません。
var mView = new CView;
$('#output').append(mView.el);
ビューのオブジェクトを作成し、ビューのオブジェクトのelプロパティをoutput idのタグの要素に追加しています。
実行結果
どのような実行結果になるか確認します。HTMLファイルをWebブラウザで表示します。
HTMLファイルをウェブブラウザで表示すると下図の表示内容となります。何も表示されていないように見えます。
HTML出力コード
HTMLの出力を確認すると id="output" の divタグの内側にdiv タグが追加されていることが分かります。画面に表示される文字列はありませんがビューのオブエジェクトのelがページ側に反映されていることが確認できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.2.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script type="text/javascript">
$(function () {
var CView = Backbone.View.extend({
});
var mView = new CView;
$('#output').append(mView.el);
});
</script>
</head>
<body>
<div>Header</div>
<div id="output">
<div></div>
</div>
<div>Footer</div>
</body>
</html>
プログラム2:文字列を表示するView
文字列を表示できるようにViewを実装します。
コード
下記のHTMLファイルを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.2.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script type="text/javascript">
$(function () {
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});
var mView = new CView;
$('#output').append(mView.render().el);
});
</script>
</head>
<body>
<div>Header</div>
<div id="output"></div>
<div>Footer</div>
</body>
</html>
参考
下記の記述でも動作します。
$(function () {
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});
var mView = new CView;
mView.render();
$('#output').append(mView.el);
});
解説
render メソッドに描画に関する実装を記述します。HTMLに出力されるタグは、elオブジェクトに設定します。elのjqueryオブジェクトは$elとして利用できます。今回のコードではjqueryを利用しているため、el ではなく、$elを利用します。textメソッドを呼び出し、"Hello World!" の文字列をelオブジェクトに設定します。
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});
ビューのオブジェクトを作成します。画面表示のため render() メソッドを呼び出します。renderメソッドの実行により、"Hello World!" の文字列がelプロパティに設定され画面表示内容が準備できます。
その後、idにoutput の値を持つ要素に、elプロパティの内容を表示します。elプロパティはビューのオブジェクトのelプロパティを参照しても良いですし、render()メソッドの戻り値として返るViewオブジェクトのelプロパティを参照してもどちらでも同じ結果が得られます。
var mView = new CView;
$('#output').append(mView.render().el);
または、
var mView = new CView;
mView.render();
$('#output').append(mView.el);
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。"Hello World!"の文字列が画面に表示されます。
HTML出力コード
HTMLの出力を確認すると id="output" の divタグの内側にdiv タグが追加され、その内部に"Hello World!"の文字列が記載されていることが確認できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.2.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script type="text/javascript">
$(function () {
var CView = Backbone.View.extend({
});
var mView = new CView;
$('#output').append(mView.el);
});
</script>
</head>
<body>
<div>Header</div>
<div id="output">
<div>Hello World!</div>
</div>
<div>Footer</div>
</body>
</html>
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2017-11-14
作成日: 2017-04-24
