0

コアライブラリ(jquery、アンダースコア、バックボーン)をロードするようにrequirejsを構成しました。次に、バックボーンモデル、コントローラー、ビューなどを追加して、非同期でロードします。

私はこのトピックに関する多くのチュートリアルと多くの「準備ができた」定型文を見つけました。残念ながら、ほとんどのアプローチは廃止されているか、かなり複雑です(より良いアプローチがある場合でも)。

1つの例は、メインライブラリのrequirejsをどのように構成したかです: https ://stackoverflow.com/a/10914666/1309847

では、単純で有効なRequirejs構成を使用して、バックボーンビュー、モデル、コレクション、ルーター、コントローラー、およびテンプレートをロードするにはどうすればよいですか?

私はあなたのアドバイスに従いましたが、奇妙なエラーが発生します

main.js

require.config({
    paths: {
        jquery: 'vendors/jquery/jquery',
        underscore: 'vendors/underscore/underscore',
        backbone: 'vendors/backbone/backbone'
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});

require(['app'], function(app){

});

app.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
    var Message = new Backbone.Model.extend({
        //idAttribute: '_id',
        //defaults: { body: '' }
        //url: function(){ return this.id ? '/messages/' + this.id : '/messages'; }
    });

    var newMessage = new Message({ body: 'hi' });
    newMessage.save();
});

app.jsでエラーが発生します:

Uncaught TypeError: Object [object Object] has no method 'apply' 

新しいBackbone.Model.extendパーツにコメントを付けても、エラーは発生しなくなりました。

4

2 に答える 2

1

私の経験では、アプリケーションをブートストラップする最良の方法は、Backbone.Routerを作成することです。したがって、URLをアプリケーションの機能に関連付けることができます。RequireJS + Backboneを使用している場合は、RequireJSが構成されているmain.js(パス、シムなど)がある可能性があります。「require」への最初の呼び出しは、アプリ全体をブートストラップするための初期スクリプトをロードするために使用されます。例えば:

/**
* main.js - RequireJS bootstrap
*/
require.config({
  paths: {
    //your paths
  },
  shim: {
    //your shims
  }
});

require(
  [
    'app' //app.js is at the same directory as main.js 
  ],
  function(app) {
    app.init();
  }
);

次に、app.jsで新しいルーターインスタンスを作成するか、ビューとモデルの作成を開始することができます。

詳細については、http://addyosmani.github.com/backbone-fundamentals/をご覧ください。

于 2012-06-29T14:08:57.420 に答える
0

だから私が今正しく理解しているように:あなたはあなた自身のカスタムjsファイルの周りにrequirejs関数をラップする必要があります。

この関数はdefineと呼ばれます。最初のパラメーターは、main.jsファイルで定義した依存関係の配列、または別のカスタムjsへの相対パスです。2番目のパラメーターは、元のファイルを保持するコールバックです。重要なのは、共有したいオブジェクト、関数、配列、または変数を返すことです。

全体は次のようになります。

define(
    ['underscore', 'backbone'], // the dependencies (either relative paths or shortcuts defined in main.js
    function(_, Backbone){ // the return statement of the deps mapped to a var
        var MessageModel = Backbone.Model.extend({ // the original code, file
            defaults: { body: '' },

            initialize: function(){}
        });

        return MessageModel; // the return statement, sharing the "final result", sometimes you return the initialize parameter
    });

モデルをラップするコレクションについても同じです。

define(
    ['jquery', 'underscore', 'backbone', 'models/message_model'], // deps and the last one is the relative path
     function($, _, Backbone,MessageModel){ // same as above explained
var MessageCollection = Backbone.Collection.extend({
    model: MessageModel,

    initialize: function(){}
});

return MessageCollection;

});

これで、アプリケーション全体をブートストラップする方法を理解するだけで済みます。しかし、これを行うにはバックボーンについての知識がもっと必要だと思います:)

于 2012-06-29T12:31:33.623 に答える