{{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)

Peter Brown Peter Brown · Accepted Answer · 2014-10-06T20:48:45

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

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

2 Answers