CODEWITHSUNDEEP
web-applicationsember.jsrequirejshandlebars.js
Pio
Pio

Reputation: 4064

How ember picks up templates

I am learning ember and I have a question: where should I put my template files? Let's say I am using requirejs to modularize my application. If I define my index.html as in the starter kit: 

 <script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>

{{outlet}}
</script>
 <script type="text/x-handlebars" data-template-name="index">

 <ul>
  {{#each item in model}}
  <li>{{item}}</li>
 {{/each}}
 </ul>
</script>

My app works correctly. But what if I want to move my index template to another file in my project, lets say js/templates/index.html. How do I tell ember, that the template is in that directory? Do I have to use views in this case? There is the renderTemplate method of the Route, but I don't know how to tell it to pick up the template from the directory:

define(['ember','text!templates/index.html'],function(ember, indexTemplate){
var IndexRoute = Ember.Route.extend({
    renderTemplate: function(){
        this.render(indexTemplate); // clearly this is not the solution, I just don't know how to refer to the indexTemplate.
    },
    model: function(){
        return ['red','blue','yellow'];
    }
});

return IndexRoute;
});

Since the renderTemplate method awaits a string determining the name of the template to be rendered, I don't know how to tell ember, that the template is actually in another file, not in the application's index.html, but in the templates/index.html.

Upvotes: 0

Views: 253

Answers (2)

nightire
nightire

Reputation: 1371

You don't have to use require.js at all when you use Ember.js. Ember.js using Handlebars as its template engine, so you can write your templates in separated files which name should ended with .handlebars or .hbs.

Then, you need to pre-compile your template files, this procedure requires you to use Node.js and npm, which results all template files become one javascript file. After all you just link this file in your entry HTML, place it just after where you link to ember.js so Ember will recognize those templates' names. This is why all the View class would know name from their renderTemplate attribute.

If you have a huge numbers of templates which you don't hope to load them in just one .js file, you can choose to per-compile them separately and use require.js to manage the dependencies later, that's fine with Ember.

To see more information about Handlebars pre-compilation, check this link: http://handlebarsjs.com/precompilation.html

Upvotes: 1

intuitivepixel
intuitivepixel

Reputation: 23322

Basically for require.js you don't need to use renderTemplate at all to render your templates. You don't even need to have views defined if you don't need to do extra stuff in your view. Furthermore you could separate your templates defined in your index.html into separate handlebars files *.hbs or *.handlebars and load this template files in the right order.

Have a look at this projects which use require.js to load the project files:

  1. https://github.com/sh4n3d4v15/ember-todos
  2. https://github.com/stephenplusplus/todomvc/tree/emberjs_require/dependency-examples/emberjs_require
  3. https://bitbucket.org/cprecourt/ember-requirejs-example/src

Hope it helps.

Upvotes: 1

Related Questions