{{content-for 'head'}} Ember-cli

Question

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)

Answer 1

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('<meta name="' + config.modulePrefix + '/config/environment" ' +
                 'content="' + escape(JSON.stringify(config)) + '">');
  }

  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');
};

Answer 2

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.jsis coming from (which is obviously in app\templates\application.hbs), but first stumbled upon content-for helpers.