Meteor: Bootstrap Modal breaks when handlebars values change -

i'm making modal handle payments, , want use handlebars helpers form validation.

here's 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">                             <!-- session helper go-between session -->                             <button {{session 'paymentforminputsvalid'}} type="submit" class="btn btn-primary">                                 make payment                             </button>                         </div>                     </div>                     ...                 </form>             </div>         </div>     </div> </div> 

here's backing 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 set correctly, when keyup event happens, modal disappears, , black .modal-backdrop remains , doesn't allow changes. locks user out , page has refreshed.

also, had button more semantic handlebars, this:

<button {{#unless session 'paymentforminputsvalid'}}disabled{{/unless}}     type="submit" class="btn btn-primary">     make payment </button> 

but broke submit button, , made display this:

very broken.

how can modals play nice handlebars? should go different strategy form?

thanks in advance!

update

i have solution cobbled together. template being inserted modal:

<template name="paymentmodalbutton">     <button type="submit" class="btn btn-primary" {{paymentforminputsvalid}}>         make payment     </button> </template>  <!-- in appropriate place --> <div class="form-group">     <div class="col-xs-offset-3 col-xs-9">         {{> paymentmodalbutton}}     </div> </div> 

but, still can't handle handlebars {{#if}} blocks, such 1 wanted use:

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

this still breaks button rendering. easier , more semantic have behavior, if can figure out delightful.

update

i dug elements, , here's button looks like.

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

frankly can't make sense of , why it's breaking. it's being generated this, valid , works in other contexts:

<button {{#unless session 'paymentforminputsvalid'}}disabled{{/unless}} type="submit" class="btn btn-primary">     make payment </button> 

thanks!

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

it's hack until new blaze ui comes out.

the reason fails because template changed, entire template redrawn, twitter bootstrap code not applied.