CODEWITHSUNDEEP
ember.js
Didar Burmaganov
Didar Burmaganov

Reputation: 632

ember hbs templates as separate files

I want to run ember.js (version 1.0.0 Final) examples provided on their first page.

They divided each handlebar template in separate file with .hbs extension.

So I just copied all of the code and created files with same names. When I run them nothing hapens. I am trying ROUTING example.

My index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ember Starter Kit</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>

  <script src="js/libs/jquery-1.9.1.js"></script>
  <script src="js/libs/handlebars-1.0.0.js"></script>
  <script src="js/libs/ember-1.0.0.js"></script>
  <script src="js/libs/bootstrap.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

My templates are inside of the root directory and I copied them to /templates but that didn't help.

Upvotes: 19

Views: 14982

Answers (3)

thecodejack
thecodejack

Reputation: 13379

When you have templates in different files, you have to load them and compile them as EmberJS doesn't detect files. There are few ways to do that.

1) Load them to Ember.TEMPLATES: Ember loads the templates and pushes them in to an object Ember.TEMPLATES. it stores the templates content with small name key as per EmberJS Naming conventions. So we ourselves can push the templates after compiling them.

Eg: If you have a template with the name 'post', load the post.hbs file through AJAX request then set,

// "data" is html content returned from Ajax request
Ember.TEMPLATES['post'] = Ember.Handlebars.compile(data)

So now you can access the template directly as

   {{partial 'post'}}

in handlebars or set as templateName for any view classes.

App.OtherView = Ember.View.extend({
   templateName: 'post'
});

So, you may have to end up loading all HBS files through AJAX request and compile them before loading your application. This is a big overhead for an application.

In order to ease this, we can pre-compile all templates and save them as JS(which actually pushes them in to the Ember.TEMPLATES object) and just load that JS. This can be achieved using a plug-in ember-templates which is also available as a grunt job grunt-ember-templates.

2) The second way is create a view object and set the compiled code to the template of each view after the AJAX request. The text plug-in of requirejs helps you to do that.

As nowadays Ember people suggest not to create a view object unless required, I suggest you follow the first way. The precompiled one is the best option which reduces a lot of work every time you create a template.

UPDATE : There are some project building tools which takes care of compiling handlebars templates. Yeoman and Ember-Cli are the ones you can have a look once.

Upvotes: 23

Stanislav Ryahov
Stanislav Ryahov

Reputation: 131

I build my templates with Grunt. It creates one template.js file which I load after Ember. This is my own Grunt config on coffescript:

module.exports = (grunt) ->
  tmpl_dir = 'app_src/templates'
  grunt.initConfig
    tmpl_dir: tmpl_dir
    ember_handlebars:
      options:
        processName: (path) ->
          re = new RegExp("^#{tmpl_dir}\/(.*)\.hbs$", 'i')
          r = path.match(re)
          path = r[1]
          path = path.replace /\_/g, '-'
          console.log '>', path
          path
      files:
        src: '<%= tmpl_dir %>/**/*.hbs'
        dest: 'public/js/templates.js'

  grunt.loadNpmTasks('grunt-ember-handlebars')

Upvotes: 3

ianpetzer
ianpetzer

Reputation: 1838

You either need to use a build process to compile your templates and concatenate your application logic or you need to use some kind of module resolution implementation.

If you are using rails on the back-end then check out https://github.com/emberjs/ember-rails If not, check out https://github.com/stefanpenner/ember-app-kit and https://github.com/rpflorence/ember-tools

Upvotes: 1

Related Questions