2011-11-17 5 views
15

jquery、underscore.js、backbone.jsをrequire.js経由で使用する非常に基本的なテストを実装しようとしています。すべてを適切に並べてください。研究は、他の人が同じ問題を抱えていないことを示しているので、私はそれが私が見ていない単純なものでなければならないことを知っています。非常に基本的なバックボーン/アンダースコアでRequire.jsの問題が発生しました。

私が抱えている問題は、backbone.jsがロードされているときに、_への参照を見つけることができないということです。私は他の人が同じ問題を報告しているのを見つけましたが、問題は通常、依存関係の参照を間違った順序や他の明らかな問題でハンドラに渡していました。これは、バックボーンがロードされているときに起こります。

私は同じファイル内にすべてを置いて、伝統的な方法で数多くのスクリプトを適切な順序で組み込んでいくというような、いくつかの「機械的な」ソリューションを見てきましたが、それはこのような強力なアプローチのように思われるので、これは働いています。

初めてデモで動作するhttp://backbonetutorials.com/organizing-backbone-using-modules/の構造から始めましたが、非常に簡単な修正や単純なサンプルの構築を試みると少し壊れてしまいます。

あまりにも長い間、このに対して私の頭を打った後、私は戻って、別の簡単な例で、このページ Loading Backbone and Underscore using RequireJS を発見し、私は希望を取り戻しました。しかし、それに基づいて新しいテストを構築した後も、バックボーンの0.5.3-optamdブランチがそれ自身のアンダースコアへの依存を処理することになっていても、同じ問題を受けています。

これ以上の苦労はありませんが、ここではうまくいくはずのスーパーストレートフォワードコードがあります。

index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Backbone.js/Underscore.js via Require.js Learning Page</title> 
     <script src="js/libs/require/require.js"></script> 
     <script src="js/main.js"></script> 
    </head> 
    <body> 
     <div>Backbone.js/Underscore.js via Require.js Learning Page</div> 
     <div class="testhook"></div> 
    </body> 
</html> 

JS/main.js

require.config({ 
    paths: { 
      'jquery': 'libs/jquery/1.7/jquery', 
      'underscore': 'libs/underscore/1.2.2/underscore', 
      'backbone': 'libs/backbone/0.5.3-optamd/backbone' 
    }, 
    baseUrl: '/js', 
    urlArgs: 'v=1.0' 
}); 

require([ 
     'domReady', 
     'app' 
     ], 
     function(domReady, App){ 
      domReady(function(){ 
       console.log('Dom is ready'); 
       App.init(); 
      }); 
     } 
); 

JSを/

// Filename: app.js 
define([ 
     'jquery', 
     'underscore', 
     'backbone' 
     ], 
     function($, _, Backbone){ 

      var init = function(){ 

       console.log('app.js > init()'); 

       // jquery test (WORKS) 
       $('.testhook').append('testhook append'); 

       // underscore test (WORKS) 
       console.log(_.map([1, 2, 3], function(n){ return n * 2; })); 

       // backbone test (DIES) 
       var artist = new Backbone.Model({ 
         firstName: "Wassily", 
         lastName: "Kandinsky" 
        }); 

        artist.set({birthday: "December 16, 1866"}); 

        console.log(JSON.stringify(artist)); 
      } 

      return { init: init }; 
     } 
); 

正確にapp.js:ここでは、私はちょうど何とか逃し明らかに何かを期待していますコンソール出力は:

Uncaught TypeError: Cannot call method 'extend' of undefined (backbone.js:150) 
main.js:18 Dom is ready 
app.js:11  app.js > init() 
app.js:17  [2, 4, 6] 
app.js:20  Uncaught TypeError: Cannot read property 'Model' of null (app.js:20) 

NOTE: 
Line 150 in unminified backbone.js is: 
_.extend(Backbone.Model.prototype, Backbone.Events, { 

私は、Chrome 17.0.938.0 dev-mを使用しているWindows 7マシンを使用しています。

私のスクリプトのバージョンは次のとおりです。

backbone:  0.5.3-optand 
jquery:   1.7 
require:  1.0.1 
underscore:  1.2.2 

私のディレクトリ構造は次のとおりです。

js 
+-- libs/ 
¦  +-- backbone/ 
¦  ¦  +-- 0.5.3-optamd/ 
¦  ¦     +-- backbone.js 
¦  +-- jquery/ 
¦  ¦  +-- 1.7/ 
¦  ¦   +-- jquery.js 
¦  +-- require/ 
¦  ¦  +-- require.js 
¦  +-- underscore/ 
¦    +-- 1.2.2/ 
¦     +-- underscore.js 
+-- app.js 
+-- domReady.js 
+-- main.js 
+-- order.js 
index.html 

私はこれが私を与えていると本当に誰かが何にいくつかの光を当てることができます期待していますどのくらいの難しさを信じることができません地獄はここで起こっている。

+0

あなたの例では、私は100%のために働きます。どのような正確なバックボーン版を使用していますか? optamdまたはoptamd3? – Riebel

答えて

20

私は実際にこの同じ正確な問題に苦労して多くの時間を費やしました!ここで

は、私はjQueryの1.7で新しいサンプル必要-jsのプロジェクトをダウンロードし、それは...

ファーストをオフに作業を取得するために管理している方法です。 zipファイルにはjQuery 1を含むrequire-jquery.jsというファイルがあります。7は現在AMD対応です。その後

バークがバックボーンのフォークのこのオフを作成してきた今もAMDである必要の最新バージョンをダウンロードし、最後の、バックボーンのこのバージョンを試してみてください...

https://github.com/jrburke/backbone/blob/optamd/backbone.js

AMD準拠のバージョン。

その後...
のIndex.htm

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Google Analytics API Browser</title> 
     <!-- This is a special version of jQuery with RequireJS built-in --> 
     <script data-main="main" src="require-jquery.js"></script> 
    </head> 
    <body> 

    </body> 
</html> 

main.js

require(['jquery','order!libs/underscore-min','order!libs/backbone','order!scripts/app'], 
function($,_,Backbone,app){ 
    app.init(); 
}); 

app.js

define(['jquery','backbone','scripts/home'], function($, Backbone, router){ 
    var init = function(){ 
     console.log("Started"); 
      // In here you can load your routers/views/whatever 
    }; 

    return { init: init}; 
}); 

マイファイル構造は
/アプリ/のようになります。 index.htm
/app/require-jquery.js
/app/order.js
/app/main.js
/app/text.js
/app/scripts/app.js
/アプリ/スクリプト/あなたには、いくつかのより多くの助けが必要な場合は
/app/lib/underscore-min.js
/app/lib/backbone.js

は、それが助け場合、私に教えてくださいhome.jsは、Twitterの@のjcreamer898に私を打ちます私は文字通り同じことに取り組んでいます!

UPDATE私は最近、Githubの2 githubのプロジェクト、1つの実際のアプリ、および他の単純なスターター...

https://github.com/jcreamer898/Savefavs
https://github.com/jcreamer898/RequireJS-Backbone-Starter

+0

優秀!私はこれを撃つだろう! – greenanvil

+0

ここにいくつかの作業コードがあります... https://github.com/jcreamer898/Savefavs – jcreamer898

+0

情報をお寄せいただきありがとうございます!私が見逃していた重要なことの1つは、ロードされた(そして、バックボーン/アンダースコア/ etcと呼ばれる)ことを確認するためにメインアプリ自体に注文プラグインを呼び出すことでした。私は、orderを使う必要性を緩和するかもしれないので、priority config引数を調べるつもりです。もう一度、本当にありがとう。私はそれほど大変なことをする事に慣れておらず、何が本当に起こっているのかを知るために基礎的な力学を掘り下げることを避けたいと思っていました。私は今すぐ後でそれを保存し、楽しいものに戻ることができます! :)乾杯! – greenanvil

0

使用optamd3ブランチを作成しました。

+0

既にoptamdブランチを使用していました(元の質問を参照)。この問題は、経路の問題であり、おそらく主なアプリの注文の問題であると思われました。一度私は主なライブラリを隣に置くと、パスの設定オプションを使用しようとするのをやめ、注文プラグインを介してメインアプリを送って、期待どおりに動作するようになった。ありがとうtho。 – greenanvil

3

は、セットアップバックボーン、lodash(アンダースコアの交換)、jQueryの、と要求する方法の一例です。実際に私はあなたがAMD準拠のバックボーンやアンダースコア、または必要なjqueryや何か他のもの(例えば、注文)を必要としないことを発見しました。あなたがする必要があるのは、パスに定義されたアプリケーションを持っていて、シムに依存関係を設定することだけです。何とかそれは過去にそれなしで仕事をしていました。

paths: { 
    app:'app', 
    jquery: '../libs/jquery/jquery.1.9.1.min', 
    underscore: '../libs/underscore/underscore.min', 
    backbone: '../libs/backbone/backbone.min', 
    // ... 
}, 
shim: { 
"app": { 
     deps: ['jquery','underscore','backbone'], 
     exports: 'app' 
}, 
"backbone": { 
    deps: ['jquery','underscore'], 
    exports: 'Backbone' 
}, 
"underscore": { 
    exports: '_' 
} 
//... 

}

5

私は同じ問題を抱えていた。ここで

関連する問題