表单上的取消按钮，导致meteor在重绘时抛出异常

Question

我很难在流星形式上获得取消按钮。按钮和表单上的反应性之间存在一些相互作用，导致异常。

我有一个带有两个按钮的表单，一些输入和一些复选框。复选框触发更多输入字段显示/隐藏（工作正常）。

取消按钮，如果在之前按任何复选框，则工作正常。一旦复选框被激活，但只要选中复选框（但在显示额外的输入字段之后），应用程序就会出现异常。

> Exception from Deps recompute:
> Patcher._copyAttributes@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1797
> Patcher.prototype.match@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1552
> patch/<@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1364
> patch/visitNodes@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1320
> patch/visitNodes@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1321
> patch/visitNodes@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1321
> patch/visitNodes@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1321
> patch/visitNodes@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1321
> patch@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:1334
> Spark.renderToRange/</<@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:699
> LiveRange.prototype.operate@http://localhost:3000/packages/liverange.js?b3097d72d458e645fd4f0021c8ff5189abe8d98a:491
> Spark.renderToRange/<@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:693
> withEventGuard@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:162
> Spark.renderToRange@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:692
> Spark.isolate/<@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:925
> ._compute@http://localhost:3000/packages/deps.js?eba25ec453bb70e5ae5c2c54192d21e0e4d82780:183
> ._recompute@http://localhost:3000/packages/deps.js?eba25ec453bb70e5ae5c2c54192d21e0e4d82780:196
> .flush@http://localhost:3000/packages/deps.js?eba25ec453bb70e5ae5c2c54192d21e0e4d82780:288

我所做的所有挖掘似乎表明HTML存在问题，但我找不到它。我已经删除了表单中的所有代码并将其替换为将问题缩小到取消按钮。

表单代码是

<template name="joinLayout">
<section class="content" >
  <div class="modal fade in show" role="dialog" tabindex="-1" aria-hidden="true">
    {{> joinLayoutInner}}
  </div>
</section>
</template>

<template name="joinLayoutInner">
<div class="modal-header">
  <h1>Thankyou for Joining Tradebase.</h1>
  <h3>Please fill in the information below.</h3>
</div>
<form id="joinForm" action="action" class="col-sm-10 form-horizontal" role="form">
  <div class="modal-body">
    <div class="form-group">
      <label for="joinEmail" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="joinEmail" placeholder = "Required">
      </div>
    </div>
    <div class="form-group">
      <label for="joinPassword" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="joinPassword" placeholder = "Required">
      </div>
    </div>
    <div class="form-group">
      <label for="joinPhone" class="col-sm-2 control-label">Phone</label>
      <div class="col-sm-10">
        <input type="tel" class="form-control" id="joinPhone" placeholder = "Required">
      </div>
    </div>
    <div class="form-group">
      <label for="joinSuburb" class="col-sm-2 control-label">Suburb</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="joinSuburb" placeholder = "Required">
      </div>
    </div>
    <div class="form-group">
      <label for="joinState" class="col-sm-2 control-label">State</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="joinState" placeholder = "Required">
      </div>
    </div>
    <div class="form-group">
      <label for="joinPostCode" class="col-sm-2 control-label">Post Code</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="joinPostCode" placeholder = "Required">
      </div>
    </div>
    {{#if joinTradie}}
    <div class="form-group">
      <label for="joinTradeCat" class="col-sm-2 control-label">Trade Category</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="joinTradeCat" placeholder = "Required">
      </div>
    </div>
    <div class="form-group">
      <label for="joinLicNo" class="col-sm-2 control-label">License Number</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="joinLicNo" placeholder = "Required">
      </div>
    </div>
    {{/if}}
    {{#if joinStudent}}
    <div class="form-group">
      <label for="joinCourse" class="col-sm-2 control-label">Course</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="joinCourse" placeholder = "Required">
      </div>
    </div>
    {{/if}}
    <div class="form-group well" id="joinWell">
      <label class="checkbox-inline input-lg">
        <input id="joinUserCheck" type="checkbox" value="user" name="role" disabled checked>User</input>
      </label>
      <label class="checkbox-inline input-lg">
        <input id="joinTradieCheck" type="checkbox" value="tradie" name="role" >Tradie</input>
      </label>
      <label class="checkbox-inline input-lg">
        <input id="joinSponsorCheck" type="checkbox" value="sponsor" name="role" >Sponsor</input>
      </label>
      <label class="checkbox-inline input-lg">
        <input id="joinStudentCheck" type="checkbox" value="student" name="role" >Student</input>
      </label>
    </div>
  </div>
  <div class="modal-footer">  
    <div class="form-group">
     <div class="col-sm-offset-2 col-sm-5">
        <button type="submit" class="btn btn-primary btn-lg pull-left">Join</button>
      </div>
      <div class"col-sm-5">
        <button type="button" id="joinCancel" class="bnt btn-default btn-lg pull-right">Cancel</button> 
      </div>
    </div>
  </div>
</form>
</template>

和相关的js

Template.joinLayoutInner.events({
  'click #joinTradieCheck': function(e) {                                      
    console.log("Tradie checkbox clicked");                                    
    Session.set("joinTradieTag", (joinTradieCheck.checked?1:0));               
  },
  'click #joinStudentCheck': function(e) {                                     
    console.log("Student checkbox clicked");                                   
    Session.set("joinStudentTag", (joinStudentCheck.checked?1:0));             
  },
  'click #joinSponsorCheck': function(e) {                                     
    console.log("Sponsor checkbox clicked");                                   
    Session.set("joinSponsorTag", (joinSponsorCheck.checked?1:0));             
  }
});     

Template.joinLayoutInner.helpers({                                             
  joinTradie: function() {                                                     
    return Session.get("joinTradieTag");
  },    
  joinStudent: function() {                                                    
    return Session.get("joinStudentTag");                                      
  },  
  joinSponsor: function() {
    return Session.get("joinSponsorTag");
  }   
});   

Template.joinLayout.events({
 'click #joinCancel': function(e) { 
    e.preventDefault();                                                        
    Router.go('loginPage');                                                    
  },  
  'submit #joinForm': function(e,t) {                                          
    e.preventDefault();                                                        
    console.log("Form Sumbitted");                                             
  } 

});

如果我注释掉取消按钮的html行，一切都按预期工作。一旦我把那个按钮放回去......繁荣。

有什么想法吗？

Answer 1

发现问题。结果是一个简单的拼写错误（再次!!）

在包含取消按钮的div的类之后错过了一个“=”符号。仍然正确定位按钮但在页面重新呈现时失败了。

彼得。