1

Web アプリケーション全体で Twitter Bootstrap のモーダルを使用しています。また、Mustache テンプレートを使用して、モーダル内に表示する情報を生成しています。問題は、画面にレンダリングされるほぼすべてのフォームに対して新しいモーダルを作成していることに気づき、これが DRY に違反していると感じていることです。「ウィンドウ」オブジェクトで定義され、アプリケーション全体でアクセスできるグローバル モーダル オブジェクトを作成することを検討しています。新しいフォームを表示したいときは、フォームをグローバル モーダル オブジェクトにレンダリングしてから表示します。モーダルを使用して多数のフォームをより適切に処理する方法について、誰かアドバイスをもらえますか?

4

2 に答える 2

1

あなたの考えは正しいと思います。モーダルがたくさんある場合、新しいモーダルの作成は繰り返しになる可能性があります。私はあなたが提案したものと同様のことをしました: さまざまなモーダルに再利用できる単一のモーダル オブジェクトを作成します。

以前は jQuery ダイアログを使用していましたが、原理はまったく同じです。任意の数のフォーム (基本的には HTML コンテンツ) を表示するために使用できる定型 HTML を含む JavaScript モジュールを作成します。

アプリケーションについてあまり知らなくても、非常に基本的な実装を提案しようと思います。

ここの Bootstrap の例に基づく HTML :

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

        <h3 id="dynamicHeader">
            <!-- Our header will go here -->
        </h3>
    </div>

    <div class="modal-body" id="dynamicBody">
        <!-- Our body will go here -->
    </div>

    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

h3とに追加した一意の ID に注目してくださいdiv.modal-body。これらを JavaScript で使用して、各フォームのタイトルとコンテンツを動的に挿入します。

JavaScript:

var ModalManager = (function() {
    // cache some DOM references
    var $dynamicHeader = $('#dynamicHeader');
    var $dynamicBody = $('#dynamicBody');
    var $myModal = $('#myModal');

    var launch = function(header, body) {
        $dynamicHeader.html(header);
        $dynamicBody.html(body);
        $myModal.modal(/* options here */);
    };

    return {
        launch: launch
        /* expose more API methods here! */
    };
}());

使用例はこちら！

HTML と JavaScript:

<div id="form1">
    <div class="formHeader">
        Form One
    </div>

    <div class="formBody">
        <p>Html and stuff</p>
    </div>
</div>

<script type="text/javascript">
    // Using a closure to protect globals
    // This would probably go in your click handler to launch a given modal
    (function() {
        var headerHtml = $('form1 .formHeader').html();
        var bodyHtml = $('form1 .formBody').html();
        ModalManager.launch(headerHtml, bodyHtml );
    }());
</script>

最後に、これらすべてを 2 つの異なるフォームを起動する機能を示す jsFiddle にまとめました。

リンク: jsFiddle

モーダルの Bootstrap コードに含まれている必要があるため、jQuery を使用しました。各フォームに固有のヘッダーと本文の HTML を引き出し、共通のモーダル HTML を DOM に取り込みます。次に、モーダルを起動すると、別のモーダルのように見えますが、共通の側面が一元化されているため、それらを繰り返す必要はありません!

できることは他にもたくさんありますが、それが基本的な要点です。たとえば、私自身の実装は、ボタンを動的に構成する手段を公開しました。構成可能にしたいものに応じて、modal() 関数に渡すオプション パラメーターを追加したり、ModalManager が処理できるアプリケーション固有の他のプロパティを追加したりできます。テンプレートを使用してこれらの機能の一部を実行することは間違いありませんが、私が設定した例では必須ではありません。

それが役立つことを願っています！

于 2013-03-08T05:24:10.730 に答える
0

あなたが何を求めているのかよくわかりません。Mustache にはループ機能があるため、モーダルの配列を渡すことができ、Mustache はすべてのコードを生成する必要があります。

Twitter Bootstrap の Alert コンポーネント用の Mustache テンプレートを作成し、それを PHP と JavaScript で実装する方法を示すビデオを作成しました。また、私が話したループ機能も備えています。多分それは助けになるでしょうか？リンクは次のとおりです。 http://mikemclin.net/mustache-templates-for-php-and-javascript/

于 2013-03-06T19:13:42.720 に答える