CODEWITHSUNDEEP
ember.jsgruntjshandlebars.js
JJJ
JJJ

Reputation: 2899

Including precompiled ember handlebar templates

I've successfully precompiled handlebars into one file using grunt-ember-templates, however, when including source in html file: 

<script src="templates/app/compiledTemplates.js" type="text/javascript"></script>

It says this:

Resource interpreted as Script but transferred with MIME type text/plain: "file:///Users/jaime/voyant-svn/voyant-blocks/dev/blocks-web/src/main/webapp/templates/app/compiledTemplates.devjs".

What is the proper way of including precompiled handlebar templates?

Upvotes: 1

Views: 601

Answers (2)

Toran Billups
Toran Billups

Reputation: 27399

I combine the compiled templates with my other scripts (jQuery/ember/ember-data/my app code) using grunt. Then in my index.html I simply include the single js script (helps cut down on the number of http requests also).

I'm currently using grunt for this, a simple "build" step might look something like the below. To use this you would need to install nodejs. Next you would npm install the following

grunt
grunt-cli
grunt-ember-template-compiler
grunt-contrib-concat

Once you have these installed you can run the build below from your root if you put the js into a file called "Gruntfile.js" -then simply execute "grunt" and it will output a deps.min.js (w/ your script and templates combined)

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-ember-template-compiler');

  grunt.initConfig({
    concat: {
      dist: {
          src: [
            'website/static/website/script/vendor/handlebars-v1.2.1.js',
            'website/static/website/script/vendor/ember.min.js',
            'website/static/website/script/my-app.js’,
            'website/static/website/script/dist/tmpl.min.js'],
          dest: 'website/static/website/script/dist/deps.min.js'
      }
    },
    emberhandlebars: {
        compile: {
            options: {
                templateName: function(sourceFile) {
                    var newSource = sourceFile.replace('website/static/website/script/app/templates/', '');
                    return newSource.replace('.handlebars', '');
                }
            },
            files: ['website/static/website/script/app/templates/**/*.handlebars'],
            dest: 'website/static/website/script/dist/tmpl.min.js'
        }
    }
  });

  grunt.task.registerTask('default', ['emberhandlebars', 'concat:dist']);
};

Upvotes: 1

Joachim H. Skeie
Joachim H. Skeie

Reputation: 1903

This is how I do it in my app: 

<script type="text/javascript" charset="utf-8" src="dist/templates.js"></script>

You can see the whole index.html file here:

https://github.com/joachimhs/WarmCroc-Ember/blob/master/index.html

In, fact, I just wrote this code today during a live-coding presentation on Ember.js. The talk is recorded as a screencast, and is available from http://emberjstraining.com

This talks should give you the pointers you need to get everything set up properly :)

Upvotes: 1

Related Questions