js&quip.js:如何将我的模型、视图和集合转换为需求.js模块?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (50)

我正在用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

现在,对于用户来说,这是很多向服务器发送的javascript文件,我看到了一些关于labjs或requ.js的消息,并决定使用它进行测试。但是,我不知道如何将我的所有主干模型或视图重写到这些require.js模块中。

提问于
用户回答回答于

“request-jQuery”可用时,它将调用我的函数,该函数将返回我创建的View构造函数。

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

                return this;
            }
        });

        return MovieRow;
});

然后你可以在你的页面上写这样的东西。注意,jQuery是数组中的第一个必需项。这对应于我函数中的第一个参数。视图为第二,模型为第三。然后,我可以使用我的“定义”代码的返回值,上面的代码是构造函数。

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);        
});
用户回答回答于

在代码中:

define([    
    'jquery'
    'libraries/backbone'
]

因此,如果正确使用AMDJS版本,那么正确的定义应该是这样的:

define([    
    'jquery',
    'underscore',
    'Backbone'
], function($, _, Backbone) { ... });

这假设我在Requireconfig中创建了路径:

require.config({
    paths : {
        jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        underscore : '../../libs/js/underscore/underscore.min',
        Backbone : '../../libs/js/backbone/backbone',
    }
});

我已经看到了一些不使用AMDJS版本的实现,与之相关的是,由于它们不是异步模块,所以您必须确保它们的加载顺序是正确的。

我认为这并不能保证正确的加载依赖顺序:

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
],

这就是为什么我相信requ.js有一个名为Order的插件。

require({
    baseUrl: '/'
},[
    'order!jquery',
    'app/views/movieRow',
    'app/models/movie',
    'order!libraries/underscore',  // <- Don't forget me!
    'order!libraries/backbone'
]

参考资料:

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动