将模板 html 作为属性传递给 Ember 组件

Question

现在我有一个 Ember 组件，可以为模式弹出窗口生成标记。我想将一些 HTML 传递给将分配给模态内容正文的组件（以组件属性的形式）。像这样的东西是理想的：

路由模板：app/templates/section1.hbs

<div class="content">

    <h1>Section 1</h1>

    {{my-modal myContent}}

</div>

模态模板：app/components/my-modal/template.hbs

<div id="my-modal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                {{myContent}}

            </div>

        </div>

    </div>

</div>

我想在 modal 的正文中显示的内容是静态的并且特定于当前模板。

如果可能的话，我不想在控制器或路由的模型挂钩中设置这个myContent html。

更新：此外，我也不想使用Block params/syntax，因为我有太多的 HTML 需要在块之间移动，这会中断主模板标记的流程。

<p>Something in my template worthy of an informational modal {{#my-modal icon=icon}}
    //A ton more markup here to be added to modal body
{{/my-modal}. More text in my template's markup ...</p>

理想情况下，我可以在路由模板中设置这个 html。目前这是我的解决方法，需要在didInsertElement 之后将javascript 模板附加到所需元素。

有没有更好的方法来实现这一点，比如将本地手把模板变量设置为某个 html（在 app/templates/section1.hbs 中）？

当前解决方案/解决方法：

路由模板：app/templates/section1.hbs

<script type="text/template" id="my-content">

    <h1>Hello Ember!</h1>
    <p> Welcome to components </p>

</script>

<div class="content">

    <h1>Section 1</h1>

    {{my-modal}}

</div>

组件 JS：app/components/my-modal/component.js

import Ember from 'ember';

export default Ember.Component.extend({

    tagName:    'div',
    classNames: 'modals',

    didInsertElement: function() {

        this.$('#my-modal .modal-body').append($('#my-content').html());

    };
});

模态模板：app/components/my-modal/template.hbs

<div id="my-modal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                //jQuery will append template content here

            </div>

        </div>

    </div>

</div>

Answer 1

你熟悉组件中的屈服吗？

您可以简单地尝试以下方法。

// templates/components/model-component.hbs

<div id="my-modal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                {{yield}}

            </div>

        </div>

    </div>

</div>

然后使用组件如下：

// routes/application.hbs

{{#modal-component}}

 //your special content here

{{/modal-component}}

对于您高度动态的内容，可能的解决方案是使用组件助手，它允许您加载相关组件。

你可以阅读它here。参考指南链接。

下面是快速代码参考

{{component contentView content=myContent}}