ember.js - Ember.Component( block 形式): more than one outlet {{yield}}

Question

我发现 ember 有一个非常好的机制，可以使用记录在 here 中的 {{yield}} 机制将内容包装在组件中。 .

因此，要使用文档中的示例，我可以定义一个 blog-post 组件模板，如下所示:

<script type="text/x-handlebars" id="components/blog-post">
  <h1>{{title}}</h1>
  <div class="body">{{yield}}</div>
</script>

然后我可以使用以下形式将 blog-post 嵌入到任何其他模板中:

{{#blog-post title=title}}
  <p class="author">by {{author}}</p>
  {{body}}
{{/blog-post}} 

我的问题是，我可以在组件模板中指定两个不同的 {{yield}} 导出吗？

类似的事情可以通过 Named Outlets 实现。在 Ember.Route#renderTemplate 中，如下所示:

Handlebars :

<div class="toolbar">{{outlet toolbar}}</div>
<div class="sidebar">{{outlet sidebar}}</div>

JavaScript:

App.PostsRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render({ outlet: 'sidebar' });
  }
});

我不确定我是否可以为不知道哪个路由模板将渲染它的组件采用此路径。

编辑1:

<小时/>

为了清楚起见，我正在尝试实现 Android Swipe for Action Pattern作为 Ember 组件。

因此，我希望该组件的用户能够指定两个不同的模板:

1. 普通列表项的模板，以及
2. 检测到滑动 (1) 时显示的操作模板。

我想把它变成一个组件，因为相当多的 JavaScript 用来处理触摸(开始/移动/结束)事件，同时仍然管理 smooth touch based scrolling列表中的。用户将提供两个模板，该组件将管理触摸事件和必要动画的处理。

我已经设法让组件以 block 形式工作，其中 block 的内容被像(1)一样处理。第二个模板 (2) 通过参数(下面的 actionPartial)指定，该参数是 partial 的名称。操作模板:

组件 Handlebars 模板:sfa-item.handlebars

<div {{bind-attr class=":sfa-item-actions shouldRevealActions:show" }}>
    {{partial actionPartial}}
</div>

<div {{bind-attr class=":sfa-item-details isDragging:dragging shouldRevealActions:moveout"}}>
    {{yield}}
</div>

调用 Handlebars 模板:

{{#each response in controller}}
    <div class="list-group-item sf-mr-item">
        {{#sfa-item actionPartial="mr-item-action"}}
            <h5>{{response.name}}</h5>
        {{/sfa-item}}
    </div>
{{/each}}

mr-item-action Handlebars 的定义如下:

mr-item-action.handlebars:

<div class="sf-mr-item-action">
    <button class="btn btn-lg btn-primary" {{action 'sfaClickedAction'}}>Edit</button>
    <button class="btn btn-lg btn-primary">Delete</button>
</div>

问题是，用户提供的部分操作(上面的 sfaClickedAction)不会从组件中冒泡出来。 docs 中提到的一个事实在第 4 段中。

所以，现在我不知道用户如何捕获他在提供的操作模板中定义的操作。组件无法捕获这些操作，因为它也不了解这些操作。

编辑2

<小时/>

我提出了一个后续问题 here

Answer 1

这篇博文描述了 Ember 1.10+ 最优雅的解决方案:https://coderwall.com/p/qkk2zq/components-with-structured-markup-in-ember-js-v1-10

在您的组件中，您将产量名称传递到 {{yield}} 中:

<header>
  {{yield "header"}}
</header>

<div class="body">
  {{yield "body"}}
</div>

<footer>
  {{yield "footer"}}
</footer>

当您调用组件时，您接受产量名称作为 block 参数...并使用 esleif 链!

{{#my-comp as |section|}}
  {{#if (eq section "header")}}
    My header
  {{else if (eq section "body")}}
    My body
  {{else if (eq section "footer")}}
    My footer
  {{/if}}
{{/my-comp}}

PS eq 是必备的 ember-truth-helpers 中的子表达式助手。插件。

PPS 相关 RFC:proposal , discussion .