29

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

例如，Ember 会自动创建一个索引控制器，并index在您指定{{outlet}}url时自动呈现模板/，因此我不需要任何代码window.App = Ember.Application.create();来实现此功能，除了我的 app.js 中的任何代码。如何创建一个单独的文件，例如 index.handlebars 并让 Ember 找到并渲染它？

4

6 回答 6

17

为了预加载我的模板，我在我的应用程序中使用了以下代码。它使用 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...
于 2013-03-24T01:39:31.450 回答
7

您可以使用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),
       });
   }
});
于 2013-02-09T11:03:12.470 回答
3

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

EmberJS：在相当复杂的应用程序中很好地分离模型、存储、控制器、视图的关注点？

于 2013-04-17T06:34:38.920 回答
3

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

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了解更多信息。

于 2014-08-25T11:00:30.950 回答
0

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

或者你可以使用 Require.js 来包含其他 js 文件，有一个相关的问题。

于 2013-02-07T05:58:01.890 回答
0

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

于 2013-02-07T13:23:45.307 回答