5

私はブートストラップでモーダルを使用しているので、3 つのタブを持つモーダルがあります。このタブの1つに、次のような選択があります：

      <div class="modal-body">

        <ul class="nav nav-tabs" id="TabModal">
            <li><a href="#onglet1" data-toggle="tab">Libre</a></li>
            <li><a href="#onglet2" data-toggle="tab">Complexe</a></li>
            <li><a href="#onglet3" data-toggle="tab">Questionnaire</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane" id="onglet1">
                <span class="label label-primary">Choose your collections :</span><br /><br />
                {{>eachCollections}}

                {{#if collectionChoose 1}}
                    <label style="float:left;">Par : </label>
                    <select class="form-control" style="width:200px;float:left;" id="widgetFilterSelectPanelistes">
                        <option value="none">-- none --</option>
                        <option value="name">Name</option>
                        <option value="age">Age</option>
                        <option value="city">City</option>
                    </select>
                    {{>eachKeyPanelistes}}
                    {{#if panelistChoose "name"}}
                        <select class="form-control" style="width:200px;">
                            {{#each panelistes}}
                                <option value="{{name}}">{{nom}}</option>
                            {{/each}}
                        </select>
                    {{/if}}
                {{else}}
                    {{#if collectionChoose 2}}
                        <p>participants</p>
                    {{/if}}
                {{/if}}

モーダルでは選択を使用し、選択値を変更すると他の選択などを表示します...

このテンプレートには、次のような JS ファイルがあります。

Template.eachCollections.helpers({
collections : function () {
    return Collec.find();
}
});

Template.eachCollections.events({
'change #eachCollectionsSelect' : function () {
    var selected = document.getElementById('eachCollectionsSelect').value;
    Session.set('selectedCollections', selected);   
}
});

Template.widgetFilter.collectionChoose = function (param) {
return parseInt(Session.get('selectedCollections')) === param;
}

しかし、選択変更でイベントをトリガーすると、モーダルが消えます...

解決策はありますか？

4

1 に答える 1

5

このシナリオはボンネットの下で起こっていると思います:

  • javacript jQuery プラグイン呼び出しでモーダルを開く (表示する) と、基本的に DOM が変更されます (モーダルを表示するために css クラスなどを追加します)。
  • 次に、モーダルで変更イベントが発生します。これにより、Meteor はテンプレートで定義されたとおりにモーダルを再レンダリングし、「表示された」css クラスを一掃します。
  • これにより、非表示の状態で再レンダリングされるため、モーダルが非表示になります。

実行可能な解決策は何ですか？

まず、Meteor のこの特定の部分が現在、コア開発者 (Meteor UI プロジェクト) によって書き直されており、近い将来 (1 ～ 3 か月) には、簡単な jQuery プラグインの統合が行われることをお知らせします。Meteor DOM のためです。再レンダリングによって DOM 全体が消去されることはなくなりました。新しいエンジンは、DOM 属性への変更をそのままにしておくのに十分スマートです。

したがって、基本的にあなたのコードは近い将来問題なく動作するかもしれませんが、誰もが待つほど辛抱できるわけではないので、Meteor 開発者が思いついた解決策があります (彼らはパーティーの例でそれを実装しました)。

モーダルの状態 (表示/非表示) を表す別のセッション変数が必要です。変数が true の場合、モーダルのテンプレートを IN THE SHOWN STATE で呼び出します。そうでない場合は、何もしません。これは、モーダル トランジション (フェードイン/フェードアウト) をあきらめる必要があることを意味しますが、モーダル テンプレートを正常に再レンダリングできるようにします。

パターンコードは次のとおりです: (Bootstrap 3 を使用!)

モーダル テンプレート:

<template name="myModal">
    {{#if showModal}}
        <!-- this is the backdrop fully shown from the beginning -->
        <div class="modal-backdrop fade in"></div>
        <!-- css ".show" class == modal fully shown -->
        <div class="modal show">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form class="form-horizontal">
                        <div class="modal-header">
                            <button type="button" class="close" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Modal Title</h4>
                        </div>
                        <div class="modal-body">
                            Modal Body
                        </div>
                        <div class="modal-footer">
                             <button type="button" class="cancel btn btn-default">Cancel</button>
                             <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    {{/id}}
</template>

モーダルJavaScript：

Template.myModal.created=function(){
    Session.set("show-my-modal",false);
};

Template.myModal.helpers({
    showModal:function(){
        return Session.get("show-my-modal");
    }
});

Template.myModal.events({
    "click .close, click .cancel":function(){
        Session.set("show-my-modal",false);
    },
    "submit form":function(event){
        event.preventDefault();
        //
        Session.set("show-my-modal",false);
    }
});

親テンプレート:

<template name="parent">
    {{> myModal}}
    <button class="show-my-modal-button" type="button">
        Show Modal
    </button>
</template>

親 JavaScript :

Template.parent.events({
    "click .show-my-modal-button":function(){
        Session.set("show-my-modal",true);
    }
});
于 2013-11-13T22:04:52.493 に答える