twitter-bootstrap – Modal bootstrap与变更事件流星一起消失

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

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

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

所以基本上你的代码可以在不久的将来轻松地工作但是不是每个人都耐心等待,所以这里是Meteor开发人员提出的解决方案(他们在各方的例子中实现了它).

你需要另一个Session变量来表示模态的状态：显示/隐藏.
如果变量为true,则调用模板IN 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);
    }
});