CODEWITHSUNDEEP
ember.js
pdeva
pdeva

Reputation: 45491

how to modularize ember.js templates?

all the examples on ember.js show templates being used in the form of inline script tags within a single large html file. Is there any way to separate the templates in files of their own and if so what are the best practices around it?

Upvotes: 2

Views: 468

Answers (1)

ddewaele
ddewaele

Reputation: 22603

Assuming we're focussing here on re-structuring the front-end application and defining a workflow for the javascript environment (ember.js and its dependencies) there are various tools that allow you to do that. I suggest you take a look at Grunt and Yeoman

There are several tutorials / github projects to get you started.

To answer your question regarding the templates:

Grunt has a grunt-ember-templates plugin, capable of loading up individual handlebars template files and compiling them into a single JS (all handled by the grunt watcher).

the config below allows you to to split up your handlebars templates in app/templates while at runtime everything will be compiled into scripts/templates.js

ember_templates: {
  compile: {
    options: {
      templateName: function(sourceFile) {
        return sourceFile.replace(/app\/templates\//, '');
      }
    },
    files: {
      "<%= yeoman.app %>/scripts/templates.js": ["<%= yeoman.app %>/templates/**/*.handlebars"]
    }
  }
},

Upvotes: 1

Related Questions