在动态位置插入部分/组件

时间:2015-03-25 19:41:26

标签: ember.js handlebars.js ember-cli

我创建了一个博客,其中我有一个{{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>

2 个答案:

答案 0 :(得分:3)

在理想的世界中,您似乎能够获得更有条理的表示,但如果您有信心可以明确地找到占位符(并且您相信它在合理的位置) ,您可以将HTML分成两半,并在注入内容的任一侧呈现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>

答案 1 :(得分:0)

我会这样总结你的要求:

1)提供包含帖子内容的单个字符串。 2)在该内容中包括将被处理以生成嵌入内容的把手助手。

最简单的方法是将原始帖子内容作为服务器上的把手模板进行处理。使用服务器上的把手编译器生成最终的HTML字符串,并将其作为帖子内容发送给客户端。

如果您还需要把手助手来访问客户端上模板/控制器的上下文,那么您将不得不在客户端上执行一些把手编译器并使用适当的上下文处理客户端上的帖子文本。帖子。您可以使用自定义帮助程序执行此操作。

在客户端的情况下,你可以在Ember中使用HTMLBars编译器和运行时更好地与Ember集成,而不是把手。

如果您的下载内容是静态的(意味着它只是HTML),那么您始终可以使用{{{downloads}}}在输出中包含html。我假设您希望下载内容中包含完整的HTMLBars或句柄语法。