流星:当车把值改变时，引导模态中断 [英] Meteor: Bootstrap Modal breaks when handlebars values change

问题描述

我正在制作一种处理付款的方式，我想使用一些车把帮手来进行表单验证.

I'm making a modal to handle payments, and I want to use some handlebars helpers to do form validation.

这是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保留并且不允许任何更改.它只是将用户锁定在外，必须刷新页面.

paymentFormInputsValid is set correctly, but when that keyup event happens, the modal disappears, and the black .modal-backdrop remains and doesn't allow any changes. It simply locks the user out and the page has to be refreshed.

此外，我以前有带有更多语义句柄的按钮，如下所示:

Also, I previously had the button with more semantic handlebars, like this:

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

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

but that broke the submit button, and made it display like this:

非常破碎.

如何使模式与手把配合得好?我应该为此表格采用其他策略吗?

How can I get modals to play nice with handlebars? Should I just go with a different strategy for this form?

提前谢谢！

我现在把这个解决方案拼凑了起来.模板已插入我的模态:

I now have this solution cobbled together. The template being inserted to my modal:

<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}}把手，例如我想要使用的把手:

But, this still can't handle handlebars {{#if}} blocks, such as the one I wanted to use:

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

这仍然会中断按钮的呈现.拥有这种行为会更容易且更具语义，因此，如果有人能弄清楚的话，那将是一件令人愉快的事情.

This still breaks the button rendering. It would be easier and more semantic to have this behavior, so if anyone can figure it out that would be delightful.

我挖了Elements，这是该按钮的外观.

I dug into the Elements, and here's what that button looks like.

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

坦率地说，我无法理解它的原因.它是从中生成的，它是有效的，并且可以在其他上下文中使用:

Frankly I can't make any sense of that and why it's breaking. It's being generated from this, which is valid and works in other contexts:

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

谢谢！

推荐答案

<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出来之前，这是一种黑客手段.

It's a hack until the new blaze UI comes out.

之所以失败，是因为一旦更改模板，就会重新绘制整个模板，但不会应用twitter引导程序代码.

The reason it fails is because as soon as the template changed, the entire template is redrawn, but the twitter bootstrap code is not applied.

这篇关于流星:当车把值改变时，引导模态中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！