Script[type="text/x-content-handlebars"] && contentFor

Proposals
1

I read “Document.title integration into Ember” to get one approach to implement SEO in my App. The current proposal uses window.document.title to update the title property.

Ember.Router.reopen({
  updateTitle: function() {
    this.send('collectTitleTokens', []);
  }.on('didTransition'),
 
  setTitle: function(title) {
      window.document.title = title;
  }
});

In my case, I would like also including other meta tags (already discussed here) and comes to mind one of the Ember limitation (correct me if I am wrong), is that Ember Templates/Views/Routing… works only in the context of the Application root html element (commonly the body)

I propose providing the ability to insert a component outside of the Ember Application root context. The design API is influenced by the Ember API (creating the content template based on inline script tags) and rails.contentFor.

 <script type="text/x-content-handlebars" data-content-name="seo">
    <title>{{title}}</title>
    <meta name="description" {{bind-attr content=description}} >
 </script>


route.contentFor('seo', {title: 'title page', description:'description page});

We could define the context of the component based on a application controller.

 <script type="text/x-content-handlebars" data-content-name="seo" controller="application">
    <title>{{seoTitle}}</title>
    <meta name="description" {{bind-attr content=seoDescription}} >
 </script>
 

 this.controllerFor('application').setProperties({title: 'title page', description:'description page});

This API does not try to replace the current title proposal, so far it could be used in a more different scenarios.

Feedback?

1 Like
2

I currently use the didTransition hook to collect the metadata for the current route and just use plain JS to update the meta tags and title, similar to your example.

This works well, yet it’s not ideal. It adds some cruft to the route code to collect the data. Then it gets more complicated if, for example, the description for the model is sideloaded, you have to set up observers to update the meta when that data comes in.

Using handlebars as you propose would make things much cleaner. Instead of an API to achieve this, it would be nice to just be able to render templates in the head tag.

Here’s another idea: javascript - Ember Handlebars Templates in <head> tag - Stack Overflow