2

下面的设置是我能让骨干与 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();
});

路由器.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};

});
4

2 回答 2

3

您可以在 requirejs 配置的路径中为 Backbone 创建一个别名，并在您的 shims 中使用该别名。此外，您不需要指定骨干网的完整路径，因为它尊重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){

})
于 2013-01-05T03:45:57.827 回答
2

以下文章描述了如何将 Require.js 与 Backbone.js 一起使用。它涵盖了将 Backbone.js 与 Require.js 集成的 2 种不同方式，包括 shims 和 AMD 兼容的主干.js。

就个人而言，我宁愿使用 AMD 兼容版本的 Backbone.js 和 undescore.js。它使配置更简洁，并将并行加载模块。以下博客文章描述了此选项。

重新学习 Backbone.js – Require.js 和 AMD

于 2013-01-11T17:35:26.260 回答