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>

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

enter image description here

非常破碎。

我怎样才能让模态与车把玩得很好？我应该为这种形式采用不同的策略吗？

提前致谢！

更新

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

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

直到新的火焰UI出现之前，这是一个黑客攻击。

失败的原因是因为模板一改变，整个模板就会重新绘制，但不会应用twitter引导代码。

Answer 2

以下是使用Mest的Spark渲染引擎的Bootstrap模式的示例： http://modal-example.meteor.com/

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

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

Meteor：当把手值发生变化时，Bootstrap模态会中断

更新

更新

2 个答案: