如何将多个内容片段生成到ember.js组件模板中？
如何将多个内容片段生成到ember.js组件模板中？
提问于 2015-05-17 01:20:13
目标是定义一个HTML结构，该结构包含调用方声明的多个内容块。例如，标题、正文和内容。由此产生的标记应该是：
<header>My header</header>
<div class="body">My body</div>
<footer>My footer</footer>实例化组件的模板将定义My header、My body和My footer这三个部分中的每个部分。
使用Rails，您可以使用content_for :header从调用方捕获标头内容，并使用yield :header对其进行内插。
这在ember.js中是可能的吗？
Stack Overflow用户
发布于 2018-09-20 12:22:56
以前的答复可能已经过时了.
对于这个问题，有一个公认的RFC；命名模板块API将支持将多个块传递给一个组件。
在Ember2.3中，语境成分允许对这种情况使用另一种方法：
将组件拆分为多个子组件，并将子组件作为块参数传递回组件；此设置允许设置每个子组件块的内容。
看看旋转-完整的例子。
// my-component.js
{{yield (hash
header = (component 'my-header')
content = (component 'my-content')
footer = (component 'my-footer')
)}}
{{#unless hasBlock}}
{{my-header}}
{{my-content}}
{{my-footer}}
{{/unless}}
// my-{header/content/footer}.js
{{#if hasBlock}}
{{yield}}
{{else}}
Default xxxxx
{{/if}}在这种情况下，您可以使用默认组件内容或将特定内容传递给任何子组件，如下所示：
{{my-component}}
{{#my-component as |f|}}
{{f.header}}
{{#f.content}}
Custom content
{{/f.content}}
{{f.footer}}
{{/my-component}}
{{#my-component as |f|}}
{{#f.header}}
Custom header
{{/f.header}}
{{#f.content}}
Custom content
{{/f.content}}
{{#f.footer}}
Custom footer
{{/f.footer}}
{{/my-component}}此解决方案不强制使用组件API/结构，如果忽略子组件、多次添加或有错误的顺序，则组件可能会被错误地使用，在这些情况下，组件将生成不想要的内容。
看看旋转-完整的例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30282377
复制相关文章
相似问题
腾讯云开发者
