了解BackboneJS

时间:2012-11-08 14:42:51

标签: javascript backbone.js underscore.js

我刚开始学习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 );

每个模型都放在它自己的模型文件夹中,每个集合都在它的集合文件夹中,依此类推。然后我将加载DOM中的所有脚本,首先是集合,然后是模型,视图,最后是application.js

我想要做的是能够将集合用作我可以在视图或模型中随时使用的函数集合,这些选项应该可以在任何级别和任何集合/模型中使用/ views。因此,我的sample.js文件将包含主View,它将初始化需要运行onDOM加载的所有内容,例如在必要时加载所有polyfill,启用google code prettifier等等。

显然在这种状态下没有任何作用,所以我希望有更多经验丰富的人帮助我,如果可能的话,或者指出一些与我现在想做的教程相符的教程:)

1 个答案:

答案 0 :(得分:2)

您似乎对Backbone集合的所有内容感到有些困惑。

collection in Backbone是(Backbone)模型的集合:

  

<强> Backbone.Collection

     

集合是有序的模型集。 [...]

当你这样说时:

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

您正在创建“课程”,创建新实例后,method将作为“实例方法”使用,但您无法直接在method上调用C因为extendmethod放在C.prototype上进行继承:

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

你说那个

  

将它放在一个集合中,实用函数的集合是有意义的:)

但不幸的是,仅仅因为某些事情有意义并不意味着它真的是明智的:)

您没有Application.ApplicationUtilities的任何模型,因此它不是Backbone意义上的集合。我想你只想使用一个对象作为命名空间:

Application.ApplicationUtilities = {
    polyfillize: function(tests) { /* ... */ }
};