Handlebars code inside of Ember Model field. How to evaluate?

Question

Let's say I have some model with html field. This field contains some handlebars code. For example

<div class="foo">
  {{model.title}}
</div>

The problem is when I'm trying to iterate over models and render html field, it doesn't evaluate handlebars code inside it.

{{#each models as |model|}}
  {{{model.html}}}
{{/each}}

That syntax isn't supported in ember htmlbars/handlebars, you would want to create a component that is fed the template and follow this pattern: http://stackoverflow.com/questions/30316803/compile-template-client-side-in-ember-using-htmlbars/30317961#30317961 — Kingpin2k, Jan 22 '16 at 15:59

score 0 · Answer 1 · answered Jan 22 '16 at 21:08

Here's an idea, create a Handlebars helper, that will compile handlebars.

With this sample, I believe you can build something that will suit your needs:

<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-latest.js"></script>
<script>
  var data = [{
    "title": "Hey",
    "subtitle": "I'm an inner handlebar template.",
    "html": '<h1>{{title}}</h1><h2>{{subtitle}}</h2>'
  }, {
    "title": "Nice!",
    "html": '<h1>{{title}}</h1>'
  }];
  
  /** Handlebar helper that will compile the content passed, with the data at index **/
  Handlebars.registerHelper("compile", function(content, index) {
    var template = Handlebars.compile(content);
    return template(data[index]);
  });

  var content = '{{#each .}}\
    {{{compile html @index}}}\
  {{/each}}';

  var template = Handlebars.compile(content);
  
  document.body.innerHTML = template(data);

</script>

I never used ember, but I believe you can make it work easily ;)

Handlebars code inside of Ember Model field. How to evaluate?

1 Answers1