Menu
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.
279
Ember uses the Handlebars templating library to power your app's user interface. Handlebars templates contain static HTML and dynamic content inside Handlebars expressions, which are invoked with double curly braces: {{}} . Dynamic content inside a Handlebars expression is rendered with data-binding.
To create the HBS file, customize your settings, select File → Save Setlist As..., name the file, choose the save location, and click Save. To open the H5S file, double-click the file or select File → Open Setlist..., navigate to the file, and click Open. NOTE: The HBS extension was replaced by .
HTML is the language that browsers understand for laying out content on a web page. . hbs stands for Handlebars, the name of a tool that lets you write more than just HTML. When you start an app with ember serve , your templates are compiled down to something that Ember's rendering engine can process more easily.
hbs is a express. js wrapper for the handlebars. js javascript template engine. Handlebars. js is a template engine to make writing html code easier, if intrested you can look here.
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.
171
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')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
