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

【问题标题】：Using separate template files in Ember.js在 Ember.js 中使用单独的模板文件
【发布时间】：2013-01-22 12:49:00
【问题描述】：

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

例如，Ember 会自动创建一个索引控制器，如果您指定 {{outlet}}，只要 url 是 /，就会自动呈现 index 模板，所以我不需要除 @987654324 之外的任何代码@ 在我的 app.js 中用于此功能。如何创建一个单独的文件（例如 index.handlebars）并让 Ember 查找并呈现它？

【问题讨论】：

如果您将模板保留在 HTML 中，请创建一个不带模板名称的
感谢 Nikita，但这里的关键是将模板存储在单独的文件中。如果模板存储在 index.html 中，即使是小型应用程序也会很快变得繁琐。我真的很惊讶有多少人将此视为某种最佳实践。
不管怎样，如果你是写一个小应用程序，把所有模板都保留在 index.html 中也不错。
嘿，对于每个他（或她）自己的 :) 对于阅读本文的任何人，标记的答案可能有效，但更直接的答案是 Ember 本身并不处理单独的视图。反正还没有。
erquhart，标准方法是使用构建工具将所有单独的 js 文件组合成一个。 Ember 社区中的许多人使用 Rails 来执行此操作，还有使用 Grunt 的基于 Node.js 的解决方案，我在我的答案中链接到了这些解决方案

标签： ember.js

【解决方案1】：

我的解决方案是使用带有 Includes 功能的服务器端编译语言，如 Jade（因为我正在使用带有 nodejs 的 ember）。您可以将每个车把模板编写为单独的文件，并在编译期间包含它们。相关翡翠文档：https://github.com/visionmedia/jade#a13

或者你可以使用Require.js来包含其他js文件，有一个related question。

【讨论】：

我听说有人使用服务器端方法 - 但这似乎违背了使用稳定的客户端 mvc 的目的。

【解决方案2】：

我不确定我是否理解你的问题，但如果你问我认为你在问什么，那么你会在script 标签中为你的 .handlebars 文档提供一个data-template-name：@ 987654324@

【讨论】：

所以如果我命名它，ember 会自动从我的根目录中获取 index.handlebars - 这是有道理的，文档使它看起来像 data-template-name 属性只是检查在可用的 js 文件。我还没有测试，但我假设这可行 - 谢谢！
别等了，那没用。我现在在这里、各种网络资源和#emberjs irc 之间听到了这个问题的五个不同且独立的答案。我也不想通过指定数据模板名称来捆绑整个事情，因为我有包裹整个正文的脚本标签，并且只想在{{outlet}} 处交换不同的模板。 This is recommended practice in the docs.
Shawn 想做这样的事情，我想（我也是）：{{partial 'templates/settings.html' action 'users/:id/settings'}} 有没有类似的东西有效？

【解决方案3】：

您可以使用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),
       });
   }
});

【讨论】：

这是迄今为止最好的建议，所以我将其标记为答案。对于在 Ember 中处理这个问题的任何人来说，这是帮助我决定回到 Angular 的众多问题之一。有时这很让人抓狂，但它绝对是 CRUD 应用程序更强大的框架。
这对我很有用......但前提是我使用下面@joellord 的回答中的async: true。如果我不使用async: true，我的模板不会呈现。
AJAX 完成后我如何处理MyApp.MyView？此外，Ember 对此缺乏支持也是令人惊讶的。难怪 Shawn 又回到了 Angular。我正在考虑做同样的事情。

【解决方案4】：

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

【讨论】：

asnync: false 部分有所帮助。谢谢！
你应该做$.each(templates ...);而不是将你的模板包装在一个jQuery对象中
如果你发现自己在特拉维夫 - 我请你喝啤酒

【解决方案5】：

将您的 JS 拆分为多个文件，然后使用构建过程将它们拼接在一起绝对是常态。查看另一个 SO Question 的答案，其中包含两种不同技术的链接，可根据您选择的服务器端技术来布局您的应用程序：

EmberJS: Good separation of concerns for Models, Stores, Controllers, Views in a rather complex application?

【讨论】：

【解决方案6】：

有点晚了，但我会在这里为任何在这里找到自己的方式的人添加这个。

Handlebar 模板预编译可能是您正在寻找的。虽然通常您最终会在主应用程序文件中添加 <script type="text/x-handlebars"> 标签，但您也可以使用 Handlebars 将它们转换为 Javascript 字符串，然后将它们存储在 Ember.TEMPLATES 中。

这有几个优点，因为代码更干净等，而且您将能够使用 Handlebars 的运行时版本，这将导致所需的运行时库更小，并且不必在浏览器中编译模板而显着节省.

查看http://handlebarsjs.com/precompilation.html 和http://www.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/#what_is_handlebars_template_precompiling 了解更多信息。

【讨论】：