How to put HTML into templates?

1

Hi,

I just started with ember.js. But it seems that I missed some basic concepts and feel a little bit lost. So I hope to get some help here.

I started with a simple example. My index.html includes several script sections and looks like this:

<script src="libs/jquery-2.1.4.min.js"></script>
<script src="libs/ember.debug.js"></script>
<script src="libs/ember-template-compiler.js"></script>
<script src="scripts/app.js"></script>

	<script type="text/x-handlebars" id="application">
		<div id="container">
	    	<h1>First Example</h1>
			{{outlet}}
		</div>
	</script>

	<script type="text/x-handlebars" id="index">
	    <p>
        	Our content goes here
			<br />
			{{#link-to "roll"}}Start rolling dice!{{/link-to}}
		</p>
	</script>

What I am searching for is: How can I put the HTML snippets placed in the script Tags into separate files? I did not understand the concept here. Any attempt to import such files with the following code failed:

<script type="text/x-handlebars" id="index" src="templates/index.hbs" />

What is necessary that I can put my HTML code into separate files and tell ember to load these fragments? I cant believe that I need to precompile each template before deploying it - as I read in some blogs? That sounds like building a JSF application in JEE which I am coming from?

Thanks for help.

Ralph

2

I think that you will want to use ember-cli to achieve this. Ember-cli forces your application into a directory structure so that you can put all of your Handlebars templates in app/templates. You shouldn’t really have to touch index.html at all after making a few initial changes.

3

Thanks for your replay. But did this mean that I always need to work with the ember-cli command line if I want to extend my application? My goal is that also admin-users of my application can upload later some new templates (forms in my case) to extend or adapt the application. I also need to run the application as part of my JEE application on a Wildfly or GlassFish server. So in the moment I am still confused. I expected that ember.js is a framework providing ‘only’ some glue code to embed ajax calls together with a model-view-controller concept? So I only have to deal with HTML and JavaScript files? My goal is to simplify my existing Web Client which is based on JSF 2.0. In the moment it looks to me that ember.js follows an equally professional web development framework as JSF do?

4

I’m pretty new to Ember and I don’t know enough to answer all of your questions. What I do know is that you were correct about what you mentioned in your initial post - your templates need to be precompiled before you can just drop in a <script src="path/to/precompiled/templates/script.js"></script>. If you don’t want to use ember-cli, you can probably just handle precompiling the templates yourself perhaps using this guide.

From what I have read, ember-cli is going to be the official way going forward with this framework. One of the goals of ember-cli is to actually simplify the process of teams working on a single project, so your other admin users shouldn’t have any issues adding new templates as they see fit. It also handles the build process and does a bunch of useful automation in my experience so far, so if anything, it should be more of an asset to you and your team.

Hopefully someone else with more experience can address your other points. But to answer your main question, yes you either need to precompile the Handlebars templates yourself or just move to ember-cli, which should simplify things for you and give you the modularity that you want.

2 Likes
5

Pretty sure you need a separate build tool. You can go with grunt or gulp, but ember-cli is the recommended one.

Going forward ember-cli will become the standard build tool for all Ember projects. The official guide already been rewritten to use ember-cli.

Both Angular and React are coming up with their own CLI build tool, but they’re all secretly powered by ember-cli :wink:

6

Thanks for your answers. This helps me a lot to sort things. I will now invest some more time to think about my goal to migrate form JSF to JavaScrips SPAs. And I need to separate the concepts of 2-way-data-binding and template-engines.

7

Here’s my 2¢,

Ember-cli is a simple build/development tool used by the ember community. It solves problems like managing how to package/structure files, minify, obfuscate code, provide a mock server for development and much more. So anyone who developed an ember app with ember-cli can quickly get up to speed on a totally new code base.

Since I come from a Java shop like yours here’s a more important question you need to find answer for, does your app might have more than one endpoint that serves html content instead of just data(json). If that’s the case you might have to decouple the UI and the data separately to start with.

With the move to any SPA framework your server side technology and frontend app are going to be more modular and isolated at the same time, which is a good thing. The only other purpose your server side view layer might then serve is to set csrf token(or similar server generated values) in the index.html page that loads the ember app you’ve built. JSF will not even be in the picture anymore.

Ember is more than mvc, 2-way data-binding or templating, its a collection of best practices and abstractions from lot of really smart people for building web apps(not widgets/websites but web apps), so I’d say anyone who decides to use ember is in good hands. Hope it fits your need :smile: