Backbone.jsプロジェクトを構築するにはどうすればよいですか？

現在、Backbone.jsプロジェクトの最初の仕事が開始されています。実際、それは奇妙なjQueryのものから離れた最初の主要なJavaScriptプロジェクトです。Backbone.jsプロジェクトを構築するにはどうすればよいですか？

とにかく、私たちは私たちのもののアーキテクチャに苦労しています。ものを整理する最善の方法は何ですか？

私たちは、別々のファイルのすべてをフォルダ内で分割して起動しました。ビュー、モデル、コレクション、ルーターなどが含まれています。次に、すべてをindex.htmlに含めます。しかし、この問題は、すべてのファイルでドキュメント準備完了イベントを確認する必要がないということです。これはこれを行う最善の方法ですか？

はここに例を示します

このファイルはPageModelと呼ばれ、最初の行が間違っているようだ...

$(function(){ 
    app.models.Page = Backbone.Model.extend({ 
    //stuff 
    }); 
});

その後、我々が持っている私たちのindex.htmlに：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title></title> 

     <link href="assets/css/style.css" rel="stylesheet" type="text/css" /> 

     <script type="text/javascript"> 
      var app   = app     || {}; 

      app.models   = app.models   || {}; 
      app.collections = app.collections  || {}; 
      app.views  = app.views   || {}; 
      app.routers  = app.collections  || {}; 
      app.templates  = app.templates  || {}; 

      app.models.griditems = app.models.griditems || {}; 
      app.views.griditems = app.views.griditems || {}; 
     </script> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
     <script src="assets/js/libs/json2.js" type="text/javascript"></script> 
     <script src="assets/js/libs/underscore-1.1.7.min.js" type="text/javascript"></script> 
     <script src="assets/js/libs/backbone-0.5.3.min.js" type="text/javascript"></script> 

     <script src="assets/js/models/GridItemModel.js" type="text/javascript"></script> 
     <script src="assets/js/models/GalleryGridItemModel.js" type="text/javascript"></script> 
     <script src="assets/js/models/NewsGridItemModel.js" type="text/javascript"></script> 
     <script src="assets/js/models/VideoGridItemModel.js" type="text/javascript"></script> 

     <script src="assets/js/collections/GridCollection.js" type="text/javascript"></script> 

     <script src="assets/js/templates/Submenu.js" type="text/javascript"></script> 
     <script src="assets/js/templates/GalleryGridItemTemplate.js" type="text/javascript"></script> 

     <script src="assets/js/views/GridView.js" type="text/javascript"></script> 
     <script src="assets/js/views/GridItemView.js" type="text/javascript"></script> 
     <script src="assets/js/views/GalleryGridItemView.js" type="text/javascript"></script> 
     <script src="assets/js/views/VideoGridItemView.js" type="text/javascript"></script> 

     <script src="assets/js/routers/Router.js" type="text/javascript"></script> 

     <script src="assets/js/Application.js" type="text/javascript"></script> 
    </head> 

    <body> 
    </body> 
</html>

出典

2011-08-19 Joel

DOMReadyイベントでモデル/コレクション/ビュー/ルータを定義する必要はありません。 domが準備されているときだけ呼び出される必要があるのは、 'Backbone.history.start（）'です。 – shesek

これがされバックボーンプロジェクトで使用する構造

app.js

var App = function() { 
     this.Views = {}; 
     this.Routers = {}; 
     this.Models = {}; 
     this.Collections = {}; 
     this.User = {}; 

     this.router = null; 
     this.view = null; 
     this.baseLocation = null; 

     this.beforeInit = function() {}; 
     this.afterInit = function() {}; 

     this.init = function(initData) { 
      if (typeof(this.beforeInit) === 'function') { 
       this.beforeInit.apply(this, arguments); 
      } 

      if (this.Views.Workspace) { 
       this.view = new this.Views.Workspace(); 
      } 
      this.baseLocation = window.location.href.replace(/[?#].*/, '') == Config.web.host; 

      if (this.Routers.Workspace) { 
       this.router = new this.Routers.Workspace(initData); 
      } 
      this.view && this.view.setListeners && this.view.setListeners(); 
      Backbone.history.start(); 

      if (typeof(this.afterInit) === 'function') { 
       this.afterInit.apply(this, arguments); 
      } 
     }.bind(this); 
    }; 

App.prototype = Core;

とrenisans.js

モデルの

var Rens = new App(); 

$.extend(Rens, { 
    container: null, 

    Error: function(data) { 
     // Handling error 
    }, 

    Localization: function(dictionary) { 
     return { 
      get: function(name) { 
       var argumentsList = Array.prototype.slice.call(arguments), 
        strings = argumentsList.slice(1), 
        text = this[name]; 

       if (text && strings.length) { 
        $(strings).each(function(i, string) { 
         var reg = new RegExp('\\$' + i, 'go'); 

         text = text.replace(reg, string); 
        }); 
       } 
       return text || 'SLB.Localization.' + name + ' not found!'; 
      }.bind(dictionary) 
     } 
    }, 

    formatDate: function(rawDate) { 
     var timestamp = /\d+/.exec(rawDate)[0], 
      date = Rens.DateUTC(timestamp), 
      months = Rens.Localization.get('months'); 

     return { 
      date: date, 
      fullDate: [date.dd, months[date.mm], date.hh].join(' '), 
      shortDate: [date.dd, date.MM, date.hh].join('.') 
     }; 
    }, 

    beforeInit: function(initData) { 
     this.Localization = new this.Localization(initData.Localization); 
    } 
});

も簡略化されたコンテンツの内容を10

コンテンツ/ profile.js

Rens.Models.Profile = Backbone.Model.extend({ 
    ... 
});

出典

2011-08-19 08:32:31

ねえ！答えをありがとう。しかし、あなたのモデルファイルのコードをどう扱うのですか？ドキュメントレディ機能もありますか？あなたがどのようにrenisans.jsとapp.jsプロジェクトファイルを構築したかを見てみると、すばらしいことでしょう。 – Joel

ドキュメントは、初期化のために一度だけ使用可能です –

素晴らしい投稿のための@ant_Tiありがとう、私のための多くの問題を解決！しかし、質問のカップル。 Core.jsではどのようなものを使っていますか？ App.prototype = Core;また、なぜApplication.jsとrenisans.jsの両方を持っていますか？ – Joel

あなたが作成している場合この形状のアプリケーションでは、JavaScriptやその他のような資産の動的な読み込みを強くお勧めします。

あなたは、このためのいくつかのオプションがあります。

を私自身はLABjs経験がないが、私は必要と使ってきました。小さなプロジェクトでは自分のためにjs。しかし、まだそれを大きなプロジェクトに使用してはいけません。このようなシステムの

利点：

あなたが依存関係で動作することができ、そしてそれらはあなたのコードの別の部分によって要求されたとき、あなたのモデルやビューのみがロードされます。最初はすべてではありません。
require.jsには、指定した依存関係に基づいてコードを細分化して複雑化させる機能も用意されています。
require.jsには、テキストファイルを読み込むためのいくつかの小さなプラグインがあります（テンプレートシステムを使用する場合はこれが便利かもしれません）。
とrequire.js working together with jqueryとそのモジュールの特別なバージョンもあります。（しかし、あなたは、このいずれかを使用する必要はありません、あなたは手動でもjQueryのトラフにロードすることができます）

require.jsが動的にロードすることができますので、あなたのモデル/ビュー/ ...モジュール内をラップする必要があります。。私は先週、スタックオーバーフローについてこれについて質問しました。その方法についての情報を見つけることができますhere

私はあなたが 'getting started with require.js'を読んで、それを使用したいと思うかどうかをお勧めします。

すべてのモデル/ビュー/ ...を別々のファイルで扱うのは、開発の面では非常に便利ですが、実際に運用するときは推奨されません。ブラウザからサーバーに送信される要求が少なくて済みます。

出典

2011-09-12 13:02:18 Sander

私はリソースローダーの使用について強く同意します。 require.isを使用して、私はそれを強く推奨します – timDunham

Backbone.jsプロジェクトを構築するにはどうすればよいですか？

答えて

関連する問題