BackboneJS-環境設定

BackboneJSは、セットアップと作業が非常に簡単です。この章では、 BackboneJS Library のダウンロードとセットアップについて説明します。

BackboneJSは、次の2つの方法で使用できます-

公式WebサイトからUIライブラリをダウンロードしています。
CDNからUIライブラリをダウンロードしています。

公式WebサイトからUIライブラリをダウンロードする

リンクhttp://backbonejs.org/を開くと、次のようなスクリーンショットが表示されます-

Backbone.js Setup

ご覧のとおり、このライブラリのダウンロードには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 という名前で保存します。これをブラウザで開くと、画面に次のテキストが表示されます。

Backbone.js Hello Example

Backbonejs-environment-setup

BackboneJS-環境設定

公式WebサイトからUIライブラリをダウンロードする

依存関係

CDNからUIライブラリをダウンロードする

例

目次