流星模板助手导致客户端条纹元素错误

Question

我一直在尝试为Meteor上的订阅表单添加Stripe Elements（v3）。

我已经设法使其启动并运行，并且可以成功创建订阅，但是仅当该页面上没有模板帮助器时。

很奇怪，一旦我添加了模板助手，就会出现错误：

“ IntegrationError：您指定的选择器（＃card-element）不应用于页面上当前没有的DOM元素。在调用mount（）之前，请确保该元素存在于页面上。”

这是JS代码：

Template.admin.onRendered(() => {

    const stripe = Stripe('pk_test_xxxxxx');
    const elements = stripe.elements();
    const form = document.getElementById('subscription-form');
    const displayError = document.getElementById('card-errors');
    const cardElement = elements.create("card");

    cardElement.mount("#card-element");

    cardElement.addEventListener('change', ({error}) => {
      if (error) {
        displayError.textContent = error.message;
      } else {
        displayError.textContent = '';
      }
    });

  [....]
};

这里是HTML代码（带有模板助手）：

<template name="admin">
  <center>
    {{#if currentUser}}
      {{#if isAdmin}}

      <form id="subscription-form">
        <label for="card-element">Credit or debit card</label>
          <div id="card-element" class="MyCardElement">
            <!-- Elements will create input elements here -->
          </div>

          <div id="card-errors" role="alert">
            <!-- We'll put the error messages in this element -->
          </div>
        <button type="submit">Subscribe</button>
      </form> 

    {{/if}}
  {{else}}
    {{> login}}
  {{/if}}
</center></template>

任何人都有任何可能的建议吗？

TIA！

Answer 1

[我只是在这里猜测，但是在isAdmin为假的情况下，您没有渲染#card-element标签，但是您仍在运行该代码，因此也许它应该位于if (isAdmin) {}内部阻止？