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变量来表示模态的状态：显示/隐藏。如果变量为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);
    }
});

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

1 个答案: