0

私はBackboneJSの学習を始めたばかりで、その動作方法をテストするために小さなサンプルドキュメントを作成しています。しかし、私はそれを理解するのに苦労していて、現時点ではまったく意味がありません:)

だから、私は次のファイル構造を持っています：

/* application.js */
var Application = Application || {};

;(function ( $, window, document, undefined ) {

    new Application.ApplicationView();

})( jQuery, window, document );


/* sample.js */
var Application = Application || {};

;(function ( $, window, document, undefined ) {

    Application.ApplicationView = Backbone.View.extend({

    });

})( jQuery, window, document );


/* utilities.js */
var Application = Application || {};

;(function ( $, window, document, undefined ) {

Application.ApplicationUtilities = Backbone.Collection.extend({

    polyfillize : function(tests) {

        return _.each(tests, function(obj){
            console.log(obj);
            Modernizr.load([{
                test : _.reduce(obj.test, function(initial_value, current_value){
                    return initial_value && current_value;
                }, 1),
                nope : obj.polyfill,
                callback: function(url, result, key) {
                    console.log('Polyfill : ', [ url ]);
                }
            }]);
        });
    }

});

})( jQuery, window, document );


/* options.js */
var Application = Application || {};

;(function ( $, window, document, undefined ) {

Application.ApplicationOptions = Backbone.Model.extend({

    version : [ 1 ],

    prettify : true,

    libraries : {

        google_code_prettyfier : 'assets/js/libraries/google/prettify.js' 

    },

    dependencies : {

        google_code_prettyfier : function() {
            return Modernizr.load([{
                test : this.prettify,
                yep : [ this.libraries.google_code_prettyfier ],
                callback: function(url, result, key) {
                    return window.prettyPrint && prettyPrint();
                }
            }]);
        }
    },

    polyfills : {
        json_polyfill_url : 'http://cdn.chaoscod3r.com/code/polyfills/json3_polyfill.js',
        storage_polyfill_url : 'http://cdn.chaoscod3r.com/code/polyfills/localstorage_polyfill.js'
    }

});

})( jQuery, window, document );


/* polyfills.js */
var Application = Application || {};

;(function ( $, window, document, undefined ) {

Application.ApplicationPolyfills = Backbone.Model.extend({

    loadPolyfills : function() {
        return Application.ApplicationUtilities.polyfillize([
            {
                test        : [Modernizr.localstorage, Modernizr.sessionstorage],
                polyfill    : [Application.ApplicationOptions.polyfills.storage_polyfill_url]
            },
            {
                test        : [Modernizr.json],
                polyfill    : [Application.ApplicationOptions.polyfills.json_polyfill_url]
            }
        ]);
    }

});

})( jQuery, window, document );

独自のmodelsフォルダーに配置された各モデル、collectionsフォルダー内の各コレクションなど。次に、すべてのスクリプトをDOMにロードします。最初にコレクション、次にモデル、ビュー、最後にapplication.js。

私がやりたいのは、ビューまたはモデルでいつでも使用できる関数のコレクションとしてコレクションを使用できるようにすることです。オプションは、任意のレベルおよび任意のコレクション/モデル/ビューで使用できる必要があります。したがって、私のsample.jsファイルには、必要に応じてすべてのポリフィルをロードしたり、google code prettifierを有効にしたりするなど、onDOMロードを実行するために必要なすべてを初期化するメインビューが含まれるようになります。

明らかに、この状態では何も機能しないので、可能であればもっと経験豊富な誰かが私を助けてくれるか、あるいは私が今やろうとしていることに一致するいくつかのチュートリアルを指摘してほしいです:)

4

1 に答える 1

2

バックボーンコレクションが何であるかについて少し混乱しているようです。

バックボーンのコレクションは、（バックボーン）モデルのコレクションです。

Backbone.Collection

コレクションは、注文されたモデルのセットです。[...]

あなたがこれを言うとき：

var C = Backbone.Collection.extend({
    method: function() { ... }
});

「クラス」を作成していて、新しいインスタンスを作成すると「インスタンスメソッド」として使用できるようになりますが、継承を行うため、直接呼び出すmethodことはできません。methodCextendmethodC.prototype

C.method(); // This doesn't work, you'll just get an error.
var c = new C;
c.method(); // This works

あなたはそれを言います

コレクション、効用関数のコレクションにそれを含めることは理にかなっています:)

しかし、残念ながら、何かが理にかなっているからといって、それが本当に賢明であるとは限りません:)

モデルApplication.ApplicationUtilitiesがないので、バックボーンの意味でのコレクションではありません。オブジェクトを名前空間として使用したいだけだと思います。

Application.ApplicationUtilities = {
    polyfillize: function(tests) { /* ... */ }
};
于 2012-11-09T08:46:04.320 に答える