带有新 EmberJS 路由器的 EmberJS + RequireJS 入门套件答案

【问题标题】：EmberJS + RequireJS Starter kit with new EmberJS router带有新 EmberJS 路由器的 EmberJS + RequireJS 入门套件
【发布时间】：2014-04-01 13:03:37
【问题描述】：

首先，我是 EmberJS 和 RequireJS 初学者，所以请记住，我可能会在某些概念上迷失方向。

这就是问题所在。我正在尝试使用 RequireJS 作为依赖管理器来开始使用 EmberJS。我已经找到了一些入门工具包，但它们都使用旧的 EmberJS 路由器，因此它永远无法使用更新的包。（它使用旧语法来定义路由）

我当前的应用程序层次结构是

/
-- /css
-- /img
-- /js
---- /app
------ /controllers
------ /models
------ /views
------ app.js
------ router.js
---- /libs (All libraries are inside)
---- config.js
---- main.js
-- /templates (Html templates)
-- index.html

我的 index.html 包含

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="fr" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="fr" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="fr" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="fr" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Title</title>
    <meta name="description" content="Description">
    <meta name="author" content="Author">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <link rel="stylesheet" href="css/style.css">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script data-main="js/main" src="js/libs/require-2.1.11.min.js"></script>
    </head>
    <body id="app">
    </body>
</html>

一旦我们解决了问题，我将很乐意分享结果。如果您需要有关我的代码的任何其他信息，请询问。

最好的问候。

编辑： 我的 config.js 包含

define({
    app_name: "App_name",
    shim: {
       'ember': {
           deps: ['handlebars', 'jquery'],
           exports: 'Ember'
       },
       'ember_data': {
           deps: ['ember'],
           exports: 'DS'
       }
    },
    paths: {
       'App': 'app/main',
       'models': 'app/models',
       'views': 'app/views',
       'controllers': 'app/controllers',
       'templates': '../templates',
       /*libs*/
       'jquery': 'libs/jquery-2.1.0.min',
       'handlebars': 'libs/handlebars-1.3.0.min',
       'ember': 'libs/ember-1.4.0.min',
       'ember_data': 'libs/ember-data-1.0.0-beta7.min',
       /*requirejs-plugins*/
       'text': 'libs/requirejs-plugins/text',
       'tpl': 'libs/requirejs-plugins/hbs',
       'domReady': 'libs/requirejs-plugins/domReady',
       /*hbs dependancies*/
       'hbs/underscore': 'libs/hbs/underscore',
       'hbs/i18nprecompile': 'libs/hbs/i18nprecompile',
       'hbs/json2': 'libs/hbs/json2'
    },
    /*hbs plugin options*/
       hbs: {
       helpers: true,
       i18n: false,
       templateExtension: 'html',
       partialsUrl: ''
    }
});

我不应该说它失败了，更多的是它没有使用正确的格式来声明路由。

define(["ember"], function(Ember) {
    var Router = Ember.Router.extend({
        root: Ember.Route.extend({
            index: Ember.Route.extend({
            route: '/'
            }),
            otherRoute: Ember.Route.extend({
                route: '/other'
            })
        })
    });

    return Router;
});

【问题讨论】：

感谢您编辑问题。您认为 RequireJS 是这里问题的一个因素有什么原因吗？在我看来，这个问题纯粹是一个 Ember 问题。
问题是 EmberJS 需要我这样定义我的路由： App.Router.map(function() { this.route('test'); }); App.TestRoute = Ember.Route.extend({ //Some code }) 我可以把这行代码放在哪里？假设我使用这样的东西：github.com/fernandogmar/Emberjs-RequireJS
如果您的目标是异步模块定义，标准的解决方案是使用 ember-app-kit 或 ember-cli。这些使用 ES6 语法而不是 requirejs 语法，但大多数人发现它更容易。关键是一个自定义解析器，它取代了内置的 Ember 解析器。

标签： javascript html ember.js requirejs starter-kits

【解决方案1】：

虽然标准解决方案是使用诸如 ember-app-kit 或 ember-cli 之类的东西，它们使用自定义解析器来消除对像 App 这样的全局命名空间的需要，但也可以让 Ember 与 RequireJS 一起工作，而无需使用自定义解析器。你只需要传递全局命名空间。

首先，创建一个app.js：

define([
    "ember"
], function(Ember) {
    var App = Ember.Application.create();
    App.deferReadiness();

    return App;
});

然后像这样定义你的路由器：

define([
    "ember",
    "app"
], function(Ember, App) {

    App.Router.map(function () {
        this.route('someRoute');
        // ...
    });

    return App.Router;
});

你的文件是这样的：

define([
    "ember",
    "app"
], function(Ember, App) {

    App.SomeRoute = Ember.Route.extend({
        // ...
    });

    return App.SomeRoute;
});

然后在你的 main.js 中：

(function(root){
    require(["config"], function(config){
        requirejs.config(config);
        require([
            "app",
            "models/someModel",
            "models/store",
            "adapters/someAdapter",
            "controllers/someController",
            "views/someView",
            "router",
            "routes/someRoute",
            // ...
        ], function(App) {
            App.advanceReadiness();
        });
    });
})(this);

【讨论】：