ホームページ > 記事 > ウェブフロントエンド > Backbone.js を使用して簡単なビューを作成する方法
Backbone.js を使用して簡単なビューを作成する方法
- 不言オリジナル
- 2018-11-30 17:37:302493ブラウズ
Backbone.js を使用して簡単なビューを作成する方法 を使用して簡単なビューを作成するにはどうすればよいですか?この記事では、Backbone.js を使用して簡単なビューを作成する方法 を使用して簡単なビューを作成する方法を紹介します。具体的な内容を見てみましょう。
例 1:
コードは次のとおりです。
次の 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);
ビューのオブジェクトを作成し、idを出力するタグ要素にビューオブジェクトのel属性を追加します。
実行結果
HTMLファイルをWebブラウザで表示すると、以下のような結果が表示されます。何も表示されないようです。
HTML の出力を確認すると、id="output" の div タグ内に div タグが追加されていることがわかります。ページ上には文字列は表示されませんが、ビューのビュー要素がページ上に反映されていることが確認できます。
例 2: 文字列表示ビュー
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 メソッドでレンダリングの実装を説明します。 elオブジェクトにはHTMLに出力するマークアップを設定します。 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メソッドを実行すると、el属性に「Hello World!」という文字列が設定され、ページの表示内容が準備できます。
次に、値が id である要素の el 属性の内容を表示します。 el プロパティは View オブジェクトの el プロパティを参照でき、render() メソッドの戻り値として返される View オブジェクトの el プロパティを参照しても同様の結果が得られます。
var mView = new CView; $('#output').append(mView.render().el);
または、
var mView = new CView; mView.render(); $('#output').append(mView.el);
実行結果
Webブラウザを使用して上記のHTMLファイルを表示します。以下のような効果が表示されます。 「Hello World!」という文字列がページに表示されます。
HTML の出力を確認すると、div タグ内に id="output" と文字列「Hello World!」が追加されていることがわかります。 「そこに書いてください。
以上がBackbone.js を使用して簡単なビューを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。