在动态位置插入部分/组件 [英] Insert partial/component at dynamic location

问题描述

我创建了一个博客，其中有一个 {{downloads}} 组件显示属于一个帖子的下载。
目前我在下面下载下载 {{{post.content}}} 。

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}}}.

我想要一个特殊的字符串，包含 post.content 像[postDownloads]和render {{downloads}} 那里。

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

这是否有可能或有其他方法来解决这个问题？

我把一个简单的例子说明了我试图解决的一个用例： http： //emberjs.jsbin.com/raresalihu/3/edit

I put together an easy example illustrating one of the use-cases I'm trying to solve: http://emberjs.jsbin.com/raresalihu/3/edit

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://example.com/cool-stuff.zip", name: "cool stuff"},
                   { src: "http://example.com/cooler-stuff.zip", name: "cooler stuff"}]};
    }
  }
);

这是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>

推荐答案

似乎在一个理想的世界你会能够获得更有结构化的表示，但是如果您有信心，您可以清楚地找到占位符（并且您信任它在合理的位置），您可以将HTML分成两半，并将其两半您注入内容的任一侧的HTML。

It seems like in an ideal world you'd be able to get a more structured representation, but if you're confident you can unambiguously find the placeholder (and you trust it to be in a reasonable place), you could split the HTML in half at that point and render the two halves of the HTML on either side of your injected content.

您可以轻松地将该过程提取到组件中;以这个JSBin 为例。在上面的示例中使用组件，您可以执行以下操作：

You could extract that process pretty easily into a component; take a look at this JSBin for an example. Using the component there, in your sample above you could do something like:

<script type="text/x-handlebars" data-template-name="index">
  {{#with model as post}}
    <h3>{{post.title}}</h3>
    {{#replace-sigil body=post.content sigil='[postDownloads]'}}
      {{down-loads downloads=post.downloads}}
    {{/replace-sigil}}
  {{/with}}
</script>

这篇关于在动态位置插入部分/组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！