在Ember.js中使用单独的模板文件

Question

MVC框架始终允许将视图存储为单独的文件并进行检索.这应该如何在Ember.js中完成？我一直在寻找几个小时,所以如果你想把它作为某种重复投票,请至少链接到一个提供明确,直截了当的答案的问题或资源.

例如,Ember会自动创建一个索引控制器,并且index只要你指定了一个{{outlet}}url就自动呈现模板/,所以除了window.App = Ember.Application.create();我的app.js 之外我不需要任何代码来实现这个功能.如何创建一个单独的文件,如index.handlebars并让Ember查找并呈现它？

Answer 1

为了预加载我的模板,我在我的应用程序中使用了以下代码.它使用jQuery将模板添加到文件中,然后启动应用程序.代码可以使用一些调整,但它对我有用...

var loaderObj = {

    templates : [
    '_personMenu.html',
    'application.html',
    'index.html',
    'people.html',
    'person.html',
    'people/index.html',
    'friend.html'
]
};

loadTemplates(loaderObj.templates);
//This function loads all templates into the view
function loadTemplates(templates) {
    $(templates).each(function() {
        var tempObj = $('<script>');
        tempObj.attr('type', 'text/x-handlebars');
        var dataTemplateName = this.substring(0, this.indexOf('.'));
        tempObj.attr('data-template-name', dataTemplateName);
        $.ajax({
            async: false,
            type: 'GET',
            url: 'js/views/' + this,
            success: function(resp) {
                tempObj.html(resp);
                $('body').append(tempObj);                
            }
        });
    });

}

var App = Ember.Application.create();
//Rest of the code here...

Answer 2

您可以使用JQuery.ajax加载文本文件,然后Ember.Handlebars.compile从中创建模板:

$.ajax({
   url: 'http://example.com/path/to/your/file',
   dataType: 'text',
   success: function (resp) {
       MyApp.MyView = Ember.View.extend({
           template: Ember.Handlebars.compile(resp),
       });
   }
});