CODEWITHSUNDEEP
ember.js
Shawn Erquhart
Shawn Erquhart

Reputation: 1848

Using separate template files in Ember.js

MVC frameworks always allow views to be stored as separate files and retrieved. How is this supposed to be accomplished in Ember.js? I've been looking for hours, so if you want to vote this down as some sort of duplicate, please at least link to a question or resource that provides a definitive, straightforward answer.

For instance, Ember automatically creates an index controller, and automatically renders the index template if you indicate an {{outlet}} as long as the url is /, so I shouldn't need any code other than window.App = Ember.Application.create(); in my app.js for this functionality. How do I create a separate file such as index.handlebars and have Ember find and render it?

Upvotes: 29

Views: 12204

Answers (6)

thisbeme
thisbeme

Reputation: 31

A bit late but I'll add this here for anyone that finds their way here.

Handlebar Template Precompiling is probably your looking for. While normally you end up adding <script type="text/x-handlebars"> tags into the main app file you can also use Handlebars to transpose them into Javascript strings and then store them in Ember.TEMPLATES.

This has a couple of advantages as code is cleaner etc but also you'll be able to use the runtime version of Handlebars which will result in a smaller required runtime library and significant savings from not having to compile the template in the browser.

check out http://handlebarsjs.com/precompilation.html & http://www.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/#what_is_handlebars_template_precompiling for more information.

Upvotes: 3

Joel Lord
Joel Lord

Reputation: 2173

In order to preload my templates, I used the following code in my application. It uses jQuery to add the templates to the file and then starts the application. The code could use some tweaking but it's working for me...

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...

Upvotes: 17

ianpetzer
ianpetzer

Reputation: 1838

It is definitely the norm to split your JS into multiple files, and then use a build process to stitch them together. Have a look at this answer to another SO Question which includes links for two different techniques to lay your application out based on your choice of server side technology:

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

Upvotes: 3

Shimon Rachlenko
Shimon Rachlenko

Reputation: 5517

You can use JQuery.ajax to load text file and then Ember.Handlebars.compile to create a template from it:

$.ajax({
   url: 'http://example.com/path/to/your/file',
   dataType: 'text',
   success: function (resp) {
       MyApp.MyView = Ember.View.extend({
           template: Ember.Handlebars.compile(resp),
       });
   }
});

Upvotes: 7

Wildhoney
Wildhoney

Reputation: 4969

I'm not sure I'm understanding your question, but if you're asking what I think you're asking, then you'd give your .handlebars document a data-template-name in the script tag: <script ... data-template-name="index">...</script>

Upvotes: 0

inDream
inDream

Reputation: 1277

My solution of this is use server side compile language like Jade (as I'm using ember with nodejs) with Includes feature. You can write each handlebar template as separate files and include them during compilation. Related Jade document: https://github.com/visionmedia/jade#a13

Or you can use Require.js to include other js files, there's a related question.

Upvotes: 0

Related Questions