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>

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

我不希望在控制器中设置此myContent html，如果可能，或者在路径的模型钩子中。

更新：此外，还不想使用Block参数/语法，因为我需要在块之间进行大量的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模板附加到所需元素。

有没有更好的方法来实现这一点，例如将本地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}}

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

您可以阅读here。指南链接即可。

快速代码参考如下

{{component contentView content=myContent}}

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

1 个答案: