twitter-bootstrap - 模态 Bootstrap 随着更改事件 meteor 消失

Question

我使用带有 bootstrap 的模态，所以我有一个带有 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);
    }
});