Meteor：当车把值改变时，Bootstrap Modal 会中断

Question

我正在制作一个模式来处理付款，我想使用一些车把助手来进行表单验证。

这是html：

<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form id="paymentModalForm" class="form-horizontal">
                    ...
                    <div class="form-group">
                        <div class="col-xs-offset-3 col-xs-9">
                            <!-- this session helper is a go-between with Session -->
                            <button {{session 'paymentFormInputsValid'}} type="submit" class="btn btn-primary">
                                Make Payment
                            </button>
                        </div>
                    </div>
                    ...
                </form>
            </div>
        </div>
    </div>
</div>

这是后台js：

Template.paymentModal.events({
    'keyup .paymentFormInput': function(e, t) {
        var valid = t.findAll('.paymentFormInput').every(function(item) {
            return !!item.value.trim();
        });
        Session.set('paymentFormInputsValid', valid ? '': 'disabled');
    }
});

paymentFormInputsValid 设置正确，但是当keyup 事件发生时，模式消失，黑色的.modal-backdrop 仍然存在并且不允许任何更改。它只是将用户锁定在外，并且必须刷新页面。

另外，我之前有一个带有更多语义把手的按钮，像这样：

<button {{#unless session 'paymentFormInputsValid'}}disabled{{/unless}}
    type="submit" class="btn btn-primary">
    Make Payment
</button>

但这破坏了提交按钮，并使其显示如下：

非常破碎。

如何让模态框与车把搭配得很好？我是否应该为此表单采用不同的策略？

提前致谢！

更新

我现在将这个解决方案拼凑在一起。正在插入我的模态的模板：

<template name="paymentModalButton">
    <button type="submit" class="btn btn-primary" {{paymentFormInputsValid}}>
        Make Payment
    </button>
</template>

<!-- In the appropriate place -->
<div class="form-group">
    <div class="col-xs-offset-3 col-xs-9">
        {{> paymentModalButton}}
    </div>
</div>

但是，这仍然无法处理车把{{#if}} 块，例如我想要使用的那个：

{{#unless session 'paymentFormInputsValid'}}disabled{{/unless}}

这仍然会破坏按钮呈现。拥有这种行为会更容易，更符合语义，所以如果有人能弄清楚那将是令人愉快的。

更新

我研究了Elements，这是那个按钮的样子。

<button <!--data:8trm3tvlatwn9qaw9--=""> type="submit" class="btn btn-primary"&gt;
    Make Payment
</button>

坦率地说，我无法理解这一点以及它为什么会崩溃。它是由此生成的，它是有效的并且在其他情况下有效：

<button {{#unless session 'paymentFormInputsValid'}}disabled{{/unless}} type="submit" class="btn btn-primary">
    Make Payment
</button>

谢谢！

Answer 1

<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                 {{> someOtherTemplate}}

在新的 blaze 用户界面出现之前，这是一个 hack。

失败的原因是因为模板一改，整个模板就重绘了，但是没有应用twitter引导代码。

Answer 2

下面是一个将 Bootstrap modal 与 Meteor 的 Spark 渲染引擎一起使用的示例： http://modal-example.meteor.com/

来源： https://github.com/alanning/meteor-modal-example

正如@BradM 指出的那样，一旦 Blaze（Meteor 的新渲染引擎）发布，这种事情有望不会成为问题。