Question

首先我是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;
});

Answer 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);

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

1 个答案: