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

Question

现在，我有一个Ember组件，它为模式弹出窗口生成标记。 我想将一些HTML传递给组件（以组件属性的形式），该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>

我想在模态主体中显示的内容是静态的，并且特定于当前模板。

我不希望在控制器中或路由的模型挂钩中设置此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。 目前，这是我的变通方法，需要将javascript模板附加到didInsertElement之后的所需元素。

有没有更好的方法来完成此操作，例如将本地handlbars模板变量设置为某些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}}

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

你可以在这里阅读。 指南链接如下。

快速代码参考如下

{{component contentView content=myContent}}