无法让 parsley.js 在渲染中使用 javascript 与流星一起工作答案

【问题标题】：Can't get parsley.js to work with meteor using javascript in rendered无法让 parsley.js 在渲染中使用 javascript 与流星一起工作
【发布时间】：2015-05-31 02:57:57
【问题描述】：

在这个问题之后，我尝试使用欧芹来验证流星：Using Parsley.js with Meteor using HTML Code

我在 Ubuntu 13.10 上运行流星 0.6.6.3，添加包 jquery 并使用陨石从大气 (https://atmosphere.meteor.com/package/parsleyjs) 添加欧芹 1.1.7。

我还使用来自 client/lib 的当前版本 1.2.2 的 parsley 进行了测试（在使用 mrt 删除 parsleyjs 之后）。

知道我不能使用 HTML 标记进行验证，所以我创建了一个这样的模板

 <template name="new_customer">
   <form id="new_customer_form">
   <div class="newCustomer">         
      <div class="lookupcell">
         <input type="text" size="1" 
                name="new-customer-name" 
                id="new-customer-name" 
                class="new-customer-name" 
                placeholder="neue Firma/Person" 
                parsley-notblank="true" />
      </div>
      <div class="lookupcell">
         <input type="text" size="1" id="new-customer-email" 
                name="new-customer-email" 
                id="new-customer-email" 
                parsley-type="email" 
                parsley-trigger="keyup" 
                class="new-customer-email" placeholder="Email" />
      </div>
   </div>
   <div style="text-align: right;">
      <button type="submit">Add</button>   
      </div>
   </form>
</template>

以及以下用于设置的 javascript

Template.new_customer.rendered = function () {
   console.log("rendered new_customer");
   $new_customer_form = $( '#new_customer_form' );
   if (! $new_customer_form) { 
      console.log("form not found.");
      return; 
   }
   $new_customer_form.parsley();
   $new_customer_form.parsley( 'addItem', '#new_customer_name' );
};

当我尝试使用以下堆栈跟踪添加字段#new_customer_name 时，流星在最后一行渲染时崩溃

[09:44:11.969] "Exception from Deps afterFlush function: ParsleyForm.prototype.addItem@http://localhost:3000/packages/parsleyjs.js?ed9f338553f590de7edeb7b3e5ca8cb568f2e74d:1152
bind@http://localhost:3000/packages/parsleyjs.js?ed9f338553f590de7edeb7b3e5ca8cb568f2e74d:1295
$.fn.parsley@http://localhost:3000/packages/parsleyjs.js?ed9f338553f590de7edeb7b3e5ca8cb568f2e74d:1305
Template.new_customer.rendered@http://localhost:3000/client/X4Lizenzen.js?7d0644137e559b675577266ad6e2f78f087b3453:151
Template.__define__/partial/html</html<.rendered@http://localhost:3000/packages/templating.js?5944cd5e16b26fbf83959a0fe92d7754029a624d:181
scheduleOnscreenSetup/</<@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:443
_.forEach@http://localhost:3000/packages/underscore.js?13ab483e8a3c795d9991577e65e811cd0b827997:130
scheduleOnscreenSetup/<@http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:441
.flush@http://localhost:3000/packages/deps.js?5ac28feec1f3e0539889ecde598dd9d01e408b41:265
"

堆栈没有告诉我实际问题是什么（或者我不明白:-) 所以我想知道链接问题的作者是如何让他的设置完全与 render() 中的设置一起工作的。有什么想法吗？

更新：原来我犯了一个简单的错误，直到今天早上我才发现。我在模板中有id="new-customer-name"，并尝试使用#new_customer_name 向欧芹注册该文件。这是行不通的，更重要的是，连字符不能用于 id 字符串。纠正错误后，它起作用了。

【问题讨论】：

尝试在页面加载后在 JavaScript 控制台中运行 .rendered 回调中的代码，然后查看错误所在。它应该更详细地说明它是什么
感谢您的提示。当我运行 $( '#new_customer_form' ).parsley();在控制台中，我得到了一个“parsleyForm”类型的对象，它对我来说看起来不错。输入 $( '#new_customer_form' ).parsley( 'addItem', '#new_customer_name' );我得到 'TypeError: a is null' 。我不知道这应该是什么意思。

标签： meteor parsley.js

【解决方案1】：

我猜您需要添加 data-parsley-validate ，如下所示。如果它在不使用它的情况下工作，请告诉我。我想知道在表单中使用 data-parsley-validate 它是如何呈现的。

form id="new_customer_form" data-parsley-validate

【讨论】：