mercredi 25 mars 2015

Insert partial/component at dynamic location

I created a blog where I've got a {{downloads}} component showing the downloads which belong to a post. Currently I render the downloads below {{{post.content}}}.


I'd like to have a special string withing post.content like [postDownloads] and render {{downloads}} there.


Is this somehow possible or are there other approaches to solve this problem?


I put together an easy example illustrating one of the use-cases I'm trying to solve: http://ift.tt/1LZhwyY



App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
model: function() {
return {
title: "cool post title",
content: "<p>Lorem ipsum</p>[postDownloads]<p>coool stuff</p>",
downloads: [ { src: "http://ift.tt/1y86efX", name: "cool stuff"},
{ src: "http://ift.tt/1LZhwz0", name: "cooler stuff"}]};
}
}
);


Here's the HTML:



<script type="text/x-handlebars">
<h2>My Blog example</h2>
{{outlet}}
</script>

<script type="text/x-handlebars" id="components/down-loads">
<h3>Downloads</h3>
{{#each download in downloads}}
<p><a {{bind-attr href=download.src}}>{{download.name}}</a></p>
{{/each}}
</script>

<script type="text/x-handlebars" data-template-name="index">
{{#with model as post}}
<h3>{{post.title}}</h3>
<div>{{{post.content}}}</div>
{{down-loads downloads=post.downloads}}
{{/with}}
</script>




Aucun commentaire:

Enregistrer un commentaire