Backbone.js和require.js:如何将我的模型,视图和集合转换为require.js模块?

San*_*der 17 javascript requirejs backbone.js

我正在研究一个带有backbone.js的javascript应用程序,它说,为了便于开发,我以这种方式构建我的文件

app
 |
 + views
 |    L movieRow.js
 |    L movieDetail.js
 |
 + models
 |    L movie.js
 |    L tvshow.js
 |
 + collections
 |    L movies.js
 |    L tvshows.js
 |
 + templates
 |    L movieList.tpl
 |    L movieDetail.tpl
 |    L applicationUI.tpl
 |
 L application.js
Run Code Online (Sandbox Code Playgroud)

现在,这是很多javascript文件服务器给用户,我看到一些关于labjs或require.js的讨论,并决定用它来测试.但我不知道如何将所有骨干模型或视图重写为这些require.js模块.

任何正确方向的帮助都会很好.

tim*_*ham 20

理解要求的关键(至少在我的小脑中)是要记住,从函数返回的内容将可用于引入(或需要)此模块的其他模块.所以在下面的代码中,我需要jquery和backbone(jquery是一个由"require-jquery"处理的特殊情况).当这些2可用时,它将调用我的函数,该函数将返回我创建的View构造函数.

define([    
    'jquery'
    'libraries/backbone'
], function ($) {
        var MovieRow = Backbone.View.extend({
            render: function () {

                return this;
            }
        });

        return MovieRow;
});
Run Code Online (Sandbox Code Playgroud)

然后你可能会写这样的东西到你的页面.请注意,jquery是数组中第一个必需的项.这对应于我函数中的第一个参数.View是第2名,Model是第3名.然后我可以使用上面的"define"代码的返回值,它是构造函数.

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
], 
function ($, MovieRowView, Movie) {
    var view = new MovieRowView({model : new Movie());
    $('body').append(view.render().el);        
});
Run Code Online (Sandbox Code Playgroud)

希望这有用...我们一直很喜欢Backbone和Require :)