Is embedding handlebar templates in the main page recommended best practice?

1

It seems like all the examples I find embed the templates directly in the page, e.g. from https://github.com/emberjs/starter-kit/blob/master/index.html

<body>

  <script type="text/x-handlebars" data-template-name="index">
    <h2>Welcome to Ember.js</h2>
    <ul>
    {{#each item in content}}
        <li>{{item}}</li>
    {{/each}}
     </ul>
  </script>

It seems like this would get unweildy for a large app. In my homegrown client side templating library I load the templates from a separate file (actually, from a lot of different source files that get combined and minified for production use). For big projects is there a standard way of doing this? How is Discourse doing it (I don’t see templates in view source here; I know it’s an open source project but I don’t know RoR and it seems tied up in erb sources…)?

2

Although this is perfectly acceptable, it’s recommended to bundle precompiled handlebars templates into JavaScript via Em.TEMPLATES["template/name"] = Em.Handlebars.compile('Template content goes here')

I’m not the best person to indicate how to do this in Rails; in .NET, however, I recommend using this library.

3

I think the option of adding the templates in index.html works quite well for small examples.

However, for bigger apps (and if you’re doing Rails), have you looked into https://github.com/emberjs/ember-rails.git ?

This does all the hard work for you. It creates a nice structure for you to put your handlebars templates under app/assets/javascripts/templates, and then pre-compiles the templates when building the asset pipeline.

I think it’s the best option.

4

I struggled myself with this question for quite some time. If you are using a backend framework like Rails @tsantos83 and @raul are absolutely right. For most frameworks there are working solutions which pre-compile Handlebar templates. Are you using any backend Framework?

If this is not the case, I encourage you to take a look at Cinder Plate (https://github.com/edgycircle/cinder-plate) . This is a skeleton for Brunch I specifically created for Ember.js development when you don’t use a backend. You get a nice structure for all your files, and it does a bunch of things for you. One of them is pre-compiling your templates. So maybe it’s the right thing for you.

5

Definitely pre-compiling… but where is the source of your templates during development? Still in index.html?

6

sorry, no Rails for me…

7

Brunch! I ran into this a few weeks back and bookmarked it but forgot about it. Definitely have to try it out.

8

With Cinder Plate / Brunch the templates live within the templates directory as files. So no template mess in the index.html file!

You can check it out here: https://github.com/edgycircle/cinder-plate/tree/master/app/templates

9

There are many solutions, this is a good comparison

2 Likes
10

great link darthdeus.

11

I keep the template source in the same location (~/scripts/app/templates/*.hbs), but I don’t minify during development.

1 Like
12

No. Use a build tool.

1 Like