Использование отдельных файлов шаблонов в Ember.js

Структуры MVC всегда позволяют сохранять представления в виде отдельных файлов и извлекать их. Как это должно быть сделано в Ember.js? Я искал часы, поэтому, если вы хотите проголосовать за это как своего рода дубликат, пожалуйста, по крайней мере, ссылку на вопрос или ресурс, который дает окончательный, прямой ответ.

Например, Ember автоматически создает индексный контроллер и автоматически отображает шаблон index, если вы указываете {{outlet}}, пока URL-адрес /, поэтому мне не нужен какой-либо код, отличный от window.App = Ember.Application.create(); в моей app.js для этой функции. Как создать отдельный файл, например index.handlebars, и заставить Ember найти и отобразить его?

Ответ 1

Вы можете использовать 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),
       });
   }
});

Ответ 2

Чтобы предварительно загрузить мои шаблоны, я использовал следующий код в своем приложении. Он использует 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...

Ответ 3

Это определенно норма, чтобы разделить JS на несколько файлов, а затем использовать процесс сборки, чтобы сшить их вместе. Взгляните на этот ответ на другой вопрос SO, который включает ссылки на два разных метода, чтобы выложить ваше приложение на основе вашего выбора технологии на стороне сервера:

EmberJS: Хорошее разделение проблем для моделей, магазинов, контроллеров, просмотров в довольно сложном приложении?

Ответ 4

Немного поздно, но я добавлю это здесь для тех, кто находит здесь свой путь.

Шаблон Handlebar Precompiling, вероятно, вы ищете. Обычно, когда вы добавляете теги <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 для получения дополнительной информации.

Ответ 5

Мое решение этого - использовать язык компиляции на стороне сервера, такой как Jade (поскольку я использую ember с nodejs) с функцией Includes. Вы можете написать каждый шаблон руля в виде отдельных файлов и включить их во время компиляции. Связанный документ Jade: https://github.com/visionmedia/jade#a13

Или вы можете использовать Require.js для включения других js файлов, там есть связанный вопрос.

Ответ 6

Я не уверен, что понимаю ваш вопрос, но если вы спрашиваете, о чем, я думаю, вы спрашиваете, то вы дадите свой документ .handlebars a data-template-name в теге script: <script ... data-template-name="index">...</script>