backbone.js＆require.js：モデル、ビュー、コレクションをrequire.jsモジュールに変換するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/7353151

質問

私はバックボーンを使用してJavaScriptアプリに取り組んでいます。

app
 |
 + views
 |    L movieRow.js
 |    L movieDetail.js
 |
 + models
 |    L movie.js
 |    L tvshow.js
 |
 + collections
 |    L movies.js
 |    L tvshows.js
 |
 + templates
 |    L movieList.tpl
 |    L movieDetail.tpl
 |    L applicationUI.tpl
 |
 L application.js

これは、ユーザーへのサーバーへのJavaScriptファイルの多くであるため、LABJまたはrequire.jsについての話題が表示され、それをテストすることにしました。しかし、バックボーンモデルまたはビューをすべてこれらのrequire.jsモジュールにどのように書き直すかはわかりません。

正しい方向の助けはいいでしょう。

役に立ちましたか？

解決

理解するための鍵は（少なくとも私の小さな脳で）必要とすることです。このモジュールを引き込む（または要求する）他のモジュールが機能から返すものが利用可能になることを覚えておくことです。したがって、以下のコードでは、jQueryとBackboneが必要です（jQueryは「要求」で処理される特別なケースです）。これらの2が利用可能になると、それは私の関数を呼び出し、その関数は私が作成したビューコンストラクターを返します。

define([    
    'jquery'
    'libraries/backbone'
], function ($) {
        var MovieRow = Backbone.View.extend({
            render: function () {

                return this;
            }
        });

        return MovieRow;
});

その後、このようなものをページに書くことができます。 jQueryはアレイで最初に必要なアイテムであることに注意してください。これは、私の関数の最初のパラメーターに対応します。ビューは2番目で、モデルは3番目です。次に、コンストラクターである「定義」コードからの返品値を使用できます。

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
], 
function ($, MovieRowView, Movie) {
    var view = new MovieRowView({model : new Movie());
    $('body').append(view.render().el);        
});

これが役立つことを願っています...私たちはバックボーンを愛し、必要としています:)

他のヒント

私はコメントでスペースを使い果たし、いくつかのコードを含めたかったので、2番目の答えを作成しています。

@timdunhamが投稿したのは、ほとんどの場合、誰かがさらに理解するためにチャイムをかけるかもしれないエキストラをいくつか持っています。

コード：

define([    
    'jquery'
    'libraries/backbone'
]

アンダースコアが行方不明だと思います。第一に、バックボーンは操作するためにアンダースコアを必要とし、それなしでは壊れると思います。第二に、アンダースコアとバックボーンのAMDJSフォークを使用している場合を除き、AMDは支持的ではありません。アンダースコアv1.3.0でAMDサポートを削除しました。 AMD以外のアンダースコアとバックボーンを使用していると仮定した場合、それらはおそらくに属していません define[] そしてあるべきです require[] 代わりは。

したがって、適切な定義は、AMDJSバージョンを適切に使用している場合、このようなものになります。

define([    
    'jquery',
    'underscore',
    'Backbone'
], function($, _, Backbone) { ... });

これは、require configにパスを作成したことを前提としています。

require.config({
    paths : {
        jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        underscore : '../../libs/js/underscore/underscore.min',
        Backbone : '../../libs/js/backbone/backbone',
    }
});

AMDJSバージョンを使用していないいくつかの実装を見てきましたが、それらの問題は、非同期モジュールではないため、正しい順序でロードされていることを確認する必要があるということです。

これは、依存関係を読み込む正しい順序を保証しないと思います。

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
],

何かが依存関係としてリストされているため、必要に応じてロードされるという意味ではありません。非同期モジュールでは問題ではありませんが、この例では言及されていないので、AMDではないと思います。このモジュールは、jQuery、Movierow、Movie、およびBackboneに依存します。しかし、バックボーンがjQueryの前にロードしようとした場合...（x_x）なぜ世界的なのですか？

だからこそ、require.jsには注文と呼ばれるプラグインがあります！救助へ。注文で！依存関係を設定でき、スクリプトを...まあ...注文にロードできます。このようなもの：

require({
    baseUrl: '/'
},[
    'order!jquery',
    'app/views/movieRow',
    'app/models/movie',
    'order!libraries/underscore',  // <- Don't forget me!
    'order!libraries/backbone'
]

これにより、あなたのモジュールはjQueryが最初にロードされることを評価し、保証し、次にバックボーンを強調します。この場合は誰が気にしますか？ :-)

私はプロジェクトにAMDJS-BackboneとAMDJS-Underscoreフォークを使用しているので、通常は define[] そして、それは問題なく動作します。要求は本当に素晴らしいものであり、コードを大幅にクリーンアップしました。私が行くところはどこでも、requirejsの作家がどこにでもポップアップし、彼は常にrequire.jsに関するすべてに関する彼のコメントに常に役立ちます。そして、私はすべてを意味します。私の理論では、彼は要求に応じてテレパシーにつながっており、requirejsの新しいインスタンスがWebで発生する場合はいつでも、彼はその知識に即座にアクセスできます。このスレッドディスカッションが続くと、彼はここにも挨拶するためにここに現れたと思います。

私の免責事項は、私も必要に応じて新しいものであり、物事を誤解しているかもしれないということです。しかし、私が知っていることから、私はこれらの余分なポインターと情報が、人々がより良いコードを必要とするコードをまとめるのに役立つかもしれないと思いました。

参考文献：

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top