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

MVC框架总是允许视图作为单独的文件存储和检索。如何在Ember.js中实现这一点？我已经找了好几个小时了，所以如果你想投票否决这个重复的问题，请至少链接到一个问题或资源，提供一个明确、直接的答案

---

例如，只要url是

/

，Ember就会自动创建一个索引控制器，并且如果您指示一个

{{outlet}}

，就会自动呈现

索引

模板，因此除了

window.App=Ember.Application.create（），我不需要任何代码在my app.js中。如何创建一个单独的文件，如index.handlebar，并让Ember查找和渲染它？
我的解决方案是使用服务器端编译语言，如Jade（正如我使用带有nodejs的Ember）和Includes功能。您可以将每个把手模板作为单独的文件编写，并在编译过程中包含它们。
相关文件：

或者您可以使用Require.js包含其他js文件，有一个。
我不确定我是否理解您的问题，但如果您问的是我认为您在问的问题，然后在
脚本
标记中为.handlebar文档指定一个
数据模板名称
，
..
您可以使用
JQuery.ajax
加载文本文件，然后使用
Ember.handlebar.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),
       });
   }
});

为了预加载模板，我在应用程序中使用了以下代码。它使用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...

var loaderObj={
模板：[
“\u personMenu.html”，
'application.html'，
“index.html”，
“people.html”，
“person.html”，
“people/index.html”，
'friend.html'
]
};
loadTemplates（loaderObj.templates）；
//此函数用于将所有模板加载到视图中
函数加载模板（模板）{
$（模板）。每个（函数（）{
var tempObj=$（''）；
tempObj.attr（'type'，'text/x-handlebar'）；
var dataTemplateName=this.substring（0，this.indexOf（'.'）；
tempObj.attr（'data-template-name'，dataTemplateName）；
$.ajax({
async:false，
键入：“GET”，
url:'js/views/'+这个，
成功：功能（resp）{
html（resp）；
$（'body'）.append（tempObj）；
}
});
});
}
var App=Ember.Application.create（）；
//这里的其余代码。。。
将JS拆分为多个文件，然后使用构建过程将它们缝合在一起，这绝对是一种惯例。请看另一个SO问题的答案，其中包括两种不同技术的链接，以根据您选择的服务器端技术布局您的应用程序：

有点晚了，但我会在这里为任何在这里找到路的人添加这个

车把模板预编译可能是您需要的。通常情况下，您会将
标记添加到主应用程序文件中，但也可以使用手柄将它们转换为Javascript字符串，然后将它们存储在
Ember.TEMPLATES
中

这有两个优点，例如代码更干净等，但您也可以使用Handlebar的运行时版本，这将减少所需的运行时库，并大大节省不必在浏览器中编译模板的开销

查看&了解更多信息。
因此，如果我命名它，ember会自动从我的根目录中获取index.handlebar-这很有意义，文档使它看起来像
数据模板名称
属性只是检查可用js文件中显式定义的模板。我还没有测试，但我认为这是可行的-谢谢！不，等等，那不行。我现在听到了关于这个问题的五个不同的、独立的答案，分别来自这里、各种网络资源和#emberjs irc。我也不想通过指定一个数据模板名来限制整个过程，因为我有脚本标记包装整个正文，并且只想在
{{outlet}}
处交换不同的模板。Shawn想做类似的事情，我想（我也是）：
{{partial'templates/settings.html'action'users/:id/settings'}
有类似的方法吗？我听说有人使用服务器端方法-但这似乎真的违背了使用稳定，客户端mvc。如果您将模板保存在HTML中，请创建一个没有模板名称的标记。它将自动编译并附加到屏幕上，但这里的关键是将模板存储在单独的文件中。如果模板存储在index.html中，即使是一个小应用程序也会很快变得麻烦。我真的很惊讶有多少人将此视为某种最佳实践。无论如何，如果您正在编写一个小应用程序，那么将所有模板都保存在index.html中也不错。嘿，每个人都有自己的：）对于阅读本文的人来说，标记的答案可能会起作用，但更直截了当的答案是，余烬本身并不处理单独的视图。erquhart，标准方法是使用构建工具将所有单独的js文件组合成一个文件。Ember社区中的许多人都使用Rails来实现这一点，还有一些基于Node.js的使用Grunt的解决方案，我在回答中已经链接到了这一点。这是迄今为止最好的建议，因此我将其标记为答案。对于在《灰烬》中处理这个问题的人来说，这是帮助我决定回到《天使》的众多问题之一。它有时令人发狂，但它绝对是CRUD应用程序的更强大的框架。这对我来说非常有用。。。但前提是我使用@joellord的答案中的
async:true
，如下所示。如果我不使用
async:true
，我的模板将不会呈现。之后如何处理
MyApp.MyView