ember.js - 在动态位置插入零件/零件

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

我想要一个带有post.content的特殊字符串，例如[postDownloads]，然后在其中呈现{{downloads}}。

是否可能以某种方式解决此问题？

我整理了一个简单的示例来说明我要解决的一种用例: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拆分为到那时一半，然后在注入(inject)的内容的两边呈现HTML的两半。

您可以很容易地将该过程提取到组件中。以this JSBin为例。使用该组件，在上面的示例中，您可以执行以下操作:

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

关于ember.js - 在动态位置插入零件/零件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29265024/