Backbonejs-environment-setup
BackboneJS-環境設定
BackboneJSは、セットアップと作業が非常に簡単です。 この章では、 BackboneJS Library のダウンロードとセットアップについて説明します。
BackboneJSは、次の2つの方法で使用できます-
- 公式WebサイトからUIライブラリをダウンロードしています。
- CDNからUIライブラリをダウンロードしています。
公式WebサイトからUIライブラリをダウンロードする
リンクhttp://backbonejs.org/を開くと、次のようなスクリーンショットが表示されます-
ご覧のとおり、このライブラリのダウンロードには3つのオプションがあります-
- 開発バージョン-このボタンを右クリックして名前を付けて保存すると、完全なソース* JavaScriptライブラリ*が取得されます。
- 生産バージョン-このボタンを右クリックして名前を付けて保存すると、パックされてgzipで圧縮された* Backbone-min.jsライブラリ*ファイルが得られます。
- エッジバージョン-このボタンを右クリックして名前を付けて保存すると、*未リリースバージョン*が得られます。つまり、開発が進行中です。したがって、ご自身の責任で使用する必要があります。
依存関係
BackboneJSは、次のJavaScriptファイルに依存しています-
- Underscore.js -これは、含める必要がある唯一の難しい依存関係です。 こちらから入手できます。
- jQuery.js -RESTful永続性、Backbone.Routerによる履歴サポート、Backbone.ViewによるDOM操作のために、このファイルを含めます。 こちらから入手できます。
- json2.js -古いInternet Explorerのサポート用にこのファイルを含めます。 https://github.com/douglascrockford/JSON-js [こちら]から入手できます。
CDNからUIライブラリをダウンロードする
CDNまたは Content Delivery Network は、ユーザーにファイルを提供するように設計されたサーバーのネットワークです。 WebページでCDNリンクを使用すると、ファイルをホストする責任が独自のサーバーから一連の外部サーバーに移ります。 これは、Webページへの訪問者が同じCDNからBackboneJSのコピーを既にダウンロードしている場合、再ダウンロードする必要がないという利点も提供します。
上記のように、BackboneJSは次のJavaScriptに依存しています-
- jQuery
- 下線
したがって、上記のすべてのCDNは次のとおりです-
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type = "text/javascript"
src = "https://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type = "text/javascript"
src = "https://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>注-このチュートリアルでは、CDNバージョンのライブラリを使用しています。
例
BackboneJSを使用して簡単な例を作成しましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
<title>Hello World using Backbone.js</title>
</head>
<body>
<!-- ========= -->
<!-- Your HTML -->
<!-- ========= -->
<div id = "container">Loading...</div>
<!-- ========= -->
<!-- Libraries -->
<!-- ========= -->
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
type = "text/javascript"></script>
<!-- =============== -->
<!-- Javascript code -->
<!-- =============== -->
<script type = "text/javascript">
var AppView = Backbone.View.extend ({
//el - stands for element. Every view has an element associated with HTML content, will be rendered.
el: '#container',
//It's the first function called when this view is instantiated.
initialize: function() {
this.render();
},
//$el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.
//Like the Hello finddevguides in this case.
render: function() {
this.$ell("Hello finddevguides!!!");
}
});
var appView = new AppView();
</script>
</body>
</html>コードのコメントは一目瞭然です。 いくつかの詳細を以下に示します-
_body_タグの先頭にhtmlコードがあります
<div id = "container">Loading...</div>これは Loading … を出力します
次に、次のCDNを追加しました
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
type = "text/javascript"></script>次に、次のスクリプトがあります-
var AppView = Backbone.View.extend ({
//el - stands for element. Every view has an element associated with HTML content,
//will be rendered.
el: '#container',
//It's the first function called when this view is instantiated.
initialize: function() {
this.render();
},
//$el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.
//Like the Hello World in this case.
render: function() {
this.$ell("<h1>Hello finddevguides!!!</h1>");
}
});
var appView = new AppView();コメントは一目瞭然です。 最後の行では、 _ new AppView（）_ を初期化しています。 これは、「Hello finddevguides」を div id = "container" に出力します
このページを myFirstExamplel という名前で保存します。 これをブラウザで開くと、画面に次のテキストが表示されます。
