使用 requireJS 使骨干模型和集合在全球范围内可用答案

【问题标题】：making backbone models & collections available globally using requireJS使用 requireJS 使骨干模型和集合在全球范围内可用
【发布时间】：2013-06-05 05:27:41
【问题描述】：

我是 Web 应用程序开发的新手。我有一个名为 LoginModel 的主干模型。我想创建它的一个对象，并使其可以从任何将动态加载的主干视图全局访问。这是我的模型..

define(['underscore', 'backbone'], function(_, Backbone) {
    LoginModel = Backbone.Model.extend({
        initialize: function(){ },
        defaults:{
            userName: 'undefined',
            userID: 'undefined'
        },
        urlRoot: 'https://xxxx.xx.xxxxxx',
        parse: function(response, options){
            return{
                userName: response.userName,
                userId:response.userId
            };
        }
    });
});

【问题讨论】：

fyi，您的 LoginModel 已经是全局的，因为您忘记将 var 声明放在变量名之前。
@gion_13 那么在上述情况下它会在不重新初始化的情况下工作吗？在上述情况下如何调用 LoginModel 的解析方法？
我认为我没有得到你想要的。您只需实例化模型 (var myLoginModelInstance = new LoginModel())，然后调用 parse 方法 (myLoginModelInstance.parse())。

标签： backbone.js requirejs backbone-views backbone-routing

【解决方案1】：

您可以将新创建的对象固定到您正在使用的已经存在的全局对象上，例如Backbone：

Backbone.Model.definitions = {
    loginModel : Backbone.Model.extend({...})
}

并像这样使用它：

new View({model : Backbone.Model.definitions.loignModel});

这可能不是最短的方式，但它比用不同的变量污染全局命名空间要干净。

【讨论】：

【解决方案2】：

与其附加到Backbone.Model 原型或全局window 范围，我发现将其附加到单独的app 对象（由主干样板和大多数其他实现提供）是有效的。

您的app 对象可以被要求进入任何其他需要访问当前用户上下文的模块。

app/app.js

define(function(require, exports, module) {
    "use strict";

    var app = module.exports;

    // Initialize configuration and context objects
    app.root = "/";
    app.currentUser = null; //will be initialized in app/main.js
});

app/main.js

require(["config"], function() {
    require(["app", "LoginModel", "router"], function(app, models, Router) {
        app.currentUser = new LoginModel();
        app.currentUser.fetch();

        app.router = new Router();
    })
});

【讨论】：

【解决方案3】：

只需创建模型的全局实例，例如

var globalLoginModel = new LoginModel();

或

window.globalLoginModel = new LoginModel();

然后只需将其传递到您要在其中使用它的任何视图中，例如

new View1({ model : globalLoginModel });
new View2({ model : globalLoginModel });
new View3({ model : globalLoginModel });

应该是这样的。

【讨论】：