requirejs具有主干兼容性

时间:2013-01-05 01:45:31

标签: backbone.js requirejs amd

下面的设置是我可以通过requirejs获得支持的唯一方法 - 有更清洁的方式吗?无需每次都指定骨干的整个路径?

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href='<c:url value="/resources/css/bootstrap.min.css"/>'
    rel="stylesheet" type="text/css" />
    <script data-main="resources/js/main.js" src="resources/js/lib/require.js"></script>

</head>
<body>
    <ul class="nav">
    <li ><a href="#home">Home</a></li>
    <li><a href="#rentals">Rentals</a>
    <li><a href="#films">Films</a></li>
</ul>
</body>
</html>

main.js

require.config({
    baseUrl : '/sakila/resources/js',
    paths : {
        jquery : 'lib/jquery-1.8.3.min',
        underscore : 'lib/underscore-min',
        jqueryui : 'lib/jquery-ui-1.9.2.custom.min'
    },
    shim : {
        '/sakila/resources/js/lib/backbone-min.js' : {
            deps : [ 'underscore', 'jquery' ],
            exports : 'Backbone'
        }
    }
});
require([ 'router' ], function(Router) {
    Router.initialize();
});

router.js

define(['underscore','jquery','/sakila/resources/js/lib/backbone-min.js'],function(_,$,Backbone){
    var AppRouter = Backbone.Router.extend({
        routes : {
            'home' : 'home',
            'films' : 'films',
            'rentals' : 'rentals',
            '*actions' : 'home', // default action
            '':'home'
        },
        home:function(){
            console.log('Routed to home');
        },
        films:function(){
            console.log('Routed to films');
        },
        rentals:function(){
            console.log('Routed to rentals');
        },

    });
    initialize = function() {
        var app_router = new AppRouter();
        Backbone.history.start();
        console.log('history started');
    };
    return {initialize:initialize};

});

2 个答案:

答案 0 :(得分:3)

您可以在requirejs配置的路径中为Backbone创建别名,并在填充程序中使用该别名。此外,您不需要为骨干指定完整路径,因为它尊重配置中的baseUrl选项。

require.config({
    baseUrl : '/sakila/resources/js',
    paths : {
        jquery : 'lib/jquery-1.8.3.min',
        underscore : 'lib/underscore-min',
        jqueryui : 'lib/jquery-ui-1.9.2.custom.min',
        backbone : 'lib/backbone-min'
    },
    shim : {
        backbone : {
            deps : [ 'underscore', 'jquery' ],
            exports : 'Backbone'
        }
    }
});

然后在其他地方干净地使用它。

define(['underscore','jquery','backbone'],function(_,$,Backbone){

})

答案 1 :(得分:2)

以下文章介绍了如何将Require.js与Backbone.js一起使用。它涵盖了将Backbone.js与Require.js集成的两种不同方式,包括填充程序和AMD兼容的backbone.js。

就个人而言,我宁愿使用兼容AMD版本的Backbone.js和unwantedcore.js。它使配置更清晰,并且将并行加载模块。下面的博客文章描述了这个选项。

Re-Learning Backbone.js – Require.js and AMD