Backbone.js のViewで生成されるタグを変更するコードを紹介します。
概要
こちらの記事ではBackbone.jsを利用してシンプルなViewを作成するコードを紹介しました。シンプルなViewのコードではdivタグが生成されますが、このタグをdivタグ以外のタグに変更したい場合があります。この記事では、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({
tagName: 'p',
render: function () {
this.$el.html('文字列です。');
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>
解説
動作は
こちらの記事で紹介したBackbone.jsを利用してシンプルなViewを作成するコードと同様の動作です。Viewのオブジェクトに"tagName"プロパティを追記し、設定したいタグをプロパティに設定します。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。出力エリア(id="output" のDIV枠)に "文字列です。" のメッセージが表示されていることが確認できます。
HTML出力コード
HTMLの出力を確認すると id="output" の divタグの内側にpタグが追加され、その内部に "文字列です。" の文字列が記載されていることが確認できます。
<!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({
tagName: 'p',
//className: 'frame01',
//id: 'view01',
render: function () {
this.$el.html('文字列です。');
return this;
}
});
var mView = new CView;
$('#output').append(mView.render().el);
});
</script>
</head>
<body>
<div>Header</div>
<div id="output">
<p>文字列です。</p>
</div>
<div>Footer</div>
</body>
</html>
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2018-02-13
作成日: 2017-04-25
