0

現在、モーダル ポップアップのマークアップを生成する 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 が非常に多く、メイン テンプレート マークアップのフローが中断されるため、params/syntax を使用しないこともお勧めします。

<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。

ローカルのhandlbersテンプレート変数を(app/templates/section1.hbs内の)htmlに設定するなど、これを達成するためのより良い方法はありますか?

現在の解決策/回避策:

ルート テンプレート: 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>
4

1 に答える 1

0

コンポーネントの生成に慣れていますか?

以下を試すだけです。

// 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}}
于 2016-04-26T22:29:26.993 に答える