I've been using Yeoman ember generator for the past 1 month and now, I'd like to give ember-cli a try.
I run the generator and launch the app, everything works fine.
ember new my-new-app ember server
but I'd like to know how does
{{content-for 'head'}}
in app/index.html works?
When looking at other examples from http://www.ember-cli.com/#tutorials, none of them are using this particular helper? Is it because they are using older version of ember-cli? Why weren't they using this content-for helper?
I'm pretty sure that ember.js doesn't have this content-for helper in default, so I'm guessing ember-cli wrote it somewhere? Where is it and what is it for?
Also, when I inspect the element of my-new-app page, the div tag of 'Welcome to Ember.js' appeared at the body tag instead of head tag? How is that possible? {{mind-blown}}
( in app/index.html, {{content-for 'head'}} is placed inside head tag)
It was recently added to ember-cli based on this discussion.
Here is the relevant code from the commit:
EmberApp.prototype.contentFor = function(config, match, type) { var content = []; if (type === 'head') { content.push(calculateBaseTag(config)); content.push(''); } content = this.project.addons.reduce(function(content, addon) { if (addon.contentFor) { return content.concat(addon.contentFor(type, config)); } return content; }, content); return content.join('\n'); };
From Ember CLI guide:
app/index.html
The app/index.html
file lays the foundation for your application. This is where the basic DOM structure is laid out, the title attribute is set and stylesheet/javascript includes are done. In addition to this, app/index.html
includes multiple hooks - {{content-for 'head'}}
and {{content-for 'body'}}
- that can be used by Addons to inject content into your application’s head
or body
. These hooks need to be left in place for your application to function properly, but they can be safely ignored unless you are working directly with a particular addon.
I was actually looking for where Welcome to Ember.js
is coming from (which is obviously in app\templates\application.hbs
), but first stumbled upon content-for
helpers.