Search code examples
ember.jsember-clihandlebars.jshtmlbars

Replace string in HTMLbars/Handlebars expression with component


I've got a blog. Each blog-posts can have multiple downloads. For the downloads I created a component downloads Currently I render them at the end of each post like this:

{{#each download in sortedDownloads }}
  <p>
    <a class="dl-button" {{ action "incDownload" download }}>
      {{ download.name }} ({{ download.size}}MB)
    </a> - {{ download.downloadcount }} Hits
  </p>
{{/each}}

I'd like to be able to write something like [downloads] in the post content itself (which is simply rendered via {{{post.parsedBody}}}and replace it with a partial like the above one.

Is this possible or do you have a better way to achieve this?


Solution

  • This does not really look achievable by using either outlet or yield, since the post content will not be interpreted by the render engine.

    What should be working though is to have the placeholder in your content just as you mentioned it, and replace it by some identifiable HTML placeholder in your post.parsedBody. You could then create a View on didInsertElement, and call that view's appendTo() method to render the downloads inside the placeholder.

    One could say writing some jquery-ish elements also works, but I think inserting arbitrary elements in the views tree is horrible and goes against the Ember way of managing views tree.

    Cheers!