模态引导程序随着更改事件流星消失 [英] Modal bootstrap disapear with change event meteor

问题描述

我使用带有引导程序的模式，所以我有一个带有 3 个选项卡的模式.在其中一个选项卡中，我有一个这样的选择:

I use a modal with bootstrap, so I have a modal with 3 tabs. In one of this tab I have a select like this :

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

在模式中我使用一个选择，当我更改选择值时，我会显示另一个选择等...

In the modal I use a select and when I change the select value I show an other select etc ...

对于这个模板，我有一个这样的 JS 文件:

For this template I have a JS file like this :

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

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

But when I trigge the event on the select change, the modal disepear...

你有解决办法吗?

推荐答案

我认为这种情况正在发生:

I think this scenario is happening under the hood :

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

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

So what are the viable solutions ?

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

First, I'll have let you know that this particular part of Meteor is currently being rewritten by core developers (Meteor UI project) and in a near future (1-3 months) we'll have painless jQuery plugins integration, because Meteor DOM rerendering won't wipe the entire DOM anymore, the new engine is smart enough to leave modifications to DOM attributes untouched !

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

So basically your code might work painlessly in a near future BUT not everyone can be patient enough to wait, so here is the solution Meteor developers came up (they implemented it in the parties example).

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

You'll need another Session variable representing the state of the modal : shown/hidden. If the variable is true, then call the template for the modal IN THE SHOWN STATE, if it isn't do nothing. It means that you'll have to give up on modal transitions (fade in/out), but it will allow your modal template to rerender normally.

这是模式代码:(使用 Bootstrap 3 ！)

Here is the pattern code : (using 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:

modal 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:

parent javascript :

Template.parent.events({
    "click .show-my-modal-button":function(){
        Session.set("show-my-modal",true);
    }
});

这篇关于模态引导程序随着更改事件流星消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！