模态引导随着变化事件流星消失

Question

我使用带有引导程序的模态，所以我有一个带有 3 个选项卡的模态。在此选项卡之一中，我有一个这样的选择：

      <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;
}

但是当我触发选择更改的事件时，模式消失了......

你有解决办法吗？

Answer 1

我认为这种情况正在幕后发生：

• 您使用 javacript jQuery 插件调用打开（显示）模态，这基本上修改了 DOM（添加 css 类和东西以使模态可见）。
• 然后模态中发生更改事件，这会导致 Meteor 按照模板中定义的方式重新呈现模态，从而消除“显示的”css 类。
• 这会导致模态框消失，因为它在隐藏状态下重新呈现。

那么可行的解决方案是什么？

首先，我要让您知道 Meteor 的这个特定部分目前正在由核心开发人员（Meteor UI 项目）重写，并且在不久的将来（1-3 个月）我们将轻松集成 jQuery 插件，因为 Meteor DOM 重新渲染不会再擦除整个 DOM，所以新引擎足够智能，可以保持对 DOM 属性的修改不受影响！

所以基本上你的代码在不久的将来可能会轻松运行，但不是每个人都能有足够的耐心等待，所以这是 Meteor 开发人员提出的解决方案（他们在各方示例中实现了它）。

您需要另一个 Session 变量来表示模态的状态：显示/隐藏。 如果变量为真，则在显示状态中调用模态的模板，如果不是什么也不做。 这意味着您将不得不放弃模态转换（淡入/淡出），但它将允许您的模态模板正常重新呈现。

这是模式代码：（使用 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);
    }
});