EmberJS + RequireJS新EmberJS路由器入門套件

首先我是EmberJS和RequireJS初學者，所以請記住，我可能會在某些概念上有些迷失。EmberJS + RequireJS新EmberJS路由器入門套件

這是問題所在。我試圖用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; 
});

來源

2014-04-01 Bartheleway

感謝您編輯此問題。有什麼理由讓你看到RequireJS成爲這個問題的一個因素嗎？在我看來，這個問題純粹是一個Ember問題。 – Louis

問題是，EmberJS需要我這樣定義我的路線： App.Router.map（function（）{ this.route（'test'）; }）; App.TestRoute = Ember.Route.extend（{//部分代碼 }）我在哪裏可以放這些代碼？假設我使用這樣的東西：https://github.com/fernandogmar/Emberjs-RequireJS – Bartheleway

如果你的目標是要有異步模塊定義，標準的解決方案是使用ember-app-kit或ember-cli。這些使用ES6語法而不是requirejs語法，但大多數人發現它更容易。關鍵是取代內置Ember解析器的自定義解析器。 – Gaurav

雖然標準的解決方案是使用類似燼-APP-套件或燼-CLI，它使用自定義解析，以消除例如App一個全局命名空間的需要，有可能獲得灰燼到使用RequireJS而不使用自定義解析器。您只需傳遞全局名稱空間。

首先，創建一個app.js：在主

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

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

    return App.SomeRoute; 
});

然後：

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

而且你的文件這樣的.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);

來源

2014-05-15 02:26:17 Gaurav

EmberJS + RequireJS新EmberJS路由器入門套件

回答

相關問題