EmberJS +帶有新EmberJS路由器的RequireJS入門套件

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 +帶有新EmberJS路由器的RequireJS入門套件

問題描述

1 個解決方案

解決方案1
0 已采納 2014-05-15 02:26:17

EmberJS +帶有新EmberJS路由器的RequireJS入門套件

問題描述

1 個解決方案

解決方案1 0 已采納 2014-05-15 02:26:17

解決方案1
0 已采納 2014-05-15 02:26:17