0

我已经配置 requirejs 来加载核心库（jquery、下划线、主干）。现在我想添加我的主干模型、控制器、视图等以异步加载

我发现了很多关于这个主题的教程和很多“现成的”样板，不幸的是我提到大多数方法已被弃用或相当复杂（即使有更好的方法）。

一个例子是我如何为主要库配置 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){

});

应用程序.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，您可能有一个 main.js，其中配置了 RequireJS（路径、垫片等）。第一次调用“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 函数。

该函数称为定义。第一个参数是您在 main.js 文件中定义的依赖项数组，或者是您的另一个自定义 js 的相对路径。第二个参数是保存原始文件的回调。重要的是您返回要共享的对象、函数、数组或变量。

整个事情看起来像这样：

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 回答