私は最新バージョンの Ember.js (現在は 4.0 より前) を使用しており、RequireJS も使用しています。すべてのテンプレートをレンダリングするときに問題が発生します。すべてのテンプレートが単一の html ファイル内のスクリプト タグでラップされると、Ember はすべてのテンプレートを見つけてレンダリングします。しかし、テキストプラグインを使用してrequirejsを使用してそれらを分離すると、レンダリングに失敗したり、エラーが表示されたりします。
main.js
(function(){
window.App = Ember.Application.create({
rootElement: '#wrapper',
LOG_TRANSITIONS: true
});
requirejs.config({
paths: {
'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min',
},
// Use shim for plugins that does not support AMD
shim: {
},
});
window.compile = function(name, template) {
return Ember.TEMPLATES[name] = Ember.Handlebars.compile(template);
};
})();
define([
'segmentation',
'text',
// Controllers:
'controllers/index',
// Views:
'views/index',
// Routes:
'routes/index',
'router'
], function(Segmentation) {
}
);
router.js
define([], function(){
App.Router.map(function() {
this.route("index", {
path: "/"
});
});
App.Router.reopen({
location: 'history'
});
});
ルート/index.js
define([], function(){
console.log(App);
App.IndexRoute = Ember.Route.extend({
setupController: function(controller) {
console.log(1);
// Set the IndexController's `title`
controller.set('controller', this.container.lookup('controller:index'));
},
renderTemplate: function() {
this.render('index');
}
});
});
そして最後にテンプレートとビュー:
アプリケーション ビュー
define([
'text!templates/application.html'
], function(template){
App.ApplicationView = Ember.View.extend({
template: Ember.Handlebars.compile( template )
});
});
アプリケーション テンプレート
<center>
<h1>HEADER</h1>
<small>small</small>
</center>
<hr/>
<div id="content">{{outlet}}</div>
このすべてのコード ダンプはおそらく必要ありませんが、誰かが要求した場合に備えてです。テンプレートをスクリプト タグ内にラップして html ファイルに挿入すると、すべてがうまく機能します。
解決策はありますか?