Ember.js不是'；t渲染？

我正在使用最新版本的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) {


    }
);

define([], function(){
    App.Router.map(function() {
        this.route("index", {
            path: "/"
        });
    });

    App.Router.reopen({
        location: 'history'
    });

});

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

router.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) {


    }
);

define([], function(){
    App.Router.map(function() {
        this.route("index", {
            path: "/"
        });
    });

    App.Router.reopen({
        location: 'history'
    });

});

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

routes/index.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) {


    }
);

define([], function(){
    App.Router.map(function() {
        this.route("index", {
            path: "/"
        });
    });

    App.Router.reopen({
        location: 'history'
    });

});

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>

标题
小的

{{outlet}}

所有这些代码转储可能都是不需要的，但只是以防万一有人要求它。当我将模板包装在脚本标记中并将它们插入html文件时，一切都像一个符咒

---

有什么解决方案吗？

答案中有一个很好的回购链接。很难比他解释得更好。我也遇到了同样的问题。找到了解决这个问题的方法吗？？？如果模板已经预编译并给出了模板的名称，它就可以工作了。。