Question

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

例如，Ember自动创建索引控制器，只要网址为index，如果您指定{{outlet}}，则自动呈现/模板，因此我不需要我的app.js中除window.App = Ember.Application.create();以外的任何代码都有此功能。如何创建一个单独的文件，例如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),
       });
   }
});

Answer 3

将JS拆分为多个文件，然后使用构建过程将它们拼接在一起，这绝对是常态。看看另一个SO问题的答案，其中包括根据您选择的服务器端技术将两种不同技术打印出来的链接：

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

Answer 4

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

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

这有一些优点，因为代码更干净等，但您也可以使用Handlebars的运行时版本，这将导致所需的运行时库更小，并且无需编译模板就可以节省大量资金。浏览器。

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

Answer 5

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

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

Answer 6

我不确定我是否理解你的问题，但如果你问的是我认为你在问什么，那么你会在data-template-name中给你的.handlebars文件script。 } tag：<script ... data-template-name="index">...</script>

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

6 个答案: