在动态位置插入 partial/component

Question

我创建了一个博客，其中有一个 {{downloads}} 组件显示属于 post 的下载。目前我在 {{{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>

Answer 1

我会这样总结您的要求：

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

最简单的方法是在服务器上将原始 post 内容处理为车把模板。使用服务器上的 handlebars 编译器生成最终的 HTML 字符串作为 post 内容发送给客户端。

如果您还需要 handlebars 助手来访问客户端上 template/controller 的上下文，那么您将必须在客户端上执行一些 handlebars 编译器并处理 post 上的文本具有来自 post 的适当上下文的客户端。您可以使用自定义助手来完成此操作。

在客户端案例中，您可以在 Ember 中使用 HTMLBars 编译器和运行时，以更好地与 Ember 集成，而不是 handlebars。

如果您的下载内容是静态的（意味着它只是 HTML），那么您始终可以使用 {{{downloads}}} 在输出中包含 html。我假设您想要下载内容中的完整 HTMLBars 或 handlebars 语法。

Answer 2

在理想情况下，您似乎可以获得更结构化的表示，但如果您确信可以明确找到占位符（并且您相信它位于合理的位置），那么您可以在那时将 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>

在动态位置插入 partial/component

Insert partial/component at dynamic location

handlebars.js

ember.js

ember-cli