Question

这个Meteor客户端//client Template.mainMenu.events({ 'click .menuItem': (event) => { let menuShortName = event.currentTarget.dataset.template; Session.set('taskSelected', menuShortName); Meteor.call('mainAction', menuShortName); } }); Template.index.helpers({ 'taskInputs': function () { let task = Session.get('taskSelected'); let tasks = task ? task.split(',') : []; let data = DisplayCol.find({action: {$in: tasks}}, {sort: {createdAt: 1}}).fetch(); return {items: data}; } }); //server 'mainAction': function (menuShortName) { DisplayCol.remove({userId: this.userId}); lib.displayMakeUp({'action': menuShortName}); }, 'displayMakeUp': (doc) => { for (let i = 0; i < attrItems.length; i++) { if (attrItems[i].action === doc.action || attrItems[i].action.indexOf(doc.action + '_') >= 0) { let group = {}; group = attrItems[i]; group.userId = Meteor.userId(); console.log(JSON.stringify(group)); DisplayCol.insert(group); } } }, Template.payment.onRendered(function () { Meteor.call('getClientToken', function (error, clientToken) { if (error) { console.log(error); } else { braintree.setup(clientToken, "dropin", { container: "payment-form", // Injecting into <div id="payment-form"></div> onPaymentMethodReceived: function (response) { var nonce = response.nonce; console.log(nonce); } }); } }); });被触发两次，它调用服务器端方法两次，如果它必须执行两次渲染，我怎么才能让它触发后端方法一次，否则它怎么能得到它只渲染一次？ THX

<body>
  {{> header}}
  {{#if currentUser}}
    {{#if isVerified}}
      {{> index}}  <-------------------------- (1) 
    {{else}}
      <br><br><br><br>
      <p>Check your email for your verification link!</p>
    {{/if}}
  {{else}}
    {{> terms}}
  {{/if}}
</body>

<template name="index">
  <div id="main">
    {{#if (display 'mainMenu')}}
      {{> mainMenu}}
    {{else}} {{#if (display 'content')}}
      {{> Template.dynamic template="content" data=taskInputs}}  <------------------- (2)
      {{#if (session 'showFooter')}}
        {{> footer}}
      {{/if}}
    {{/if}}{{/if}}
  </div>
</template>

<template name="content">
  {{> subMenu}}
  <div id="main">
    <div id="content">
      <form>
        <button type="submit" style="display:none"></button>
        {{#if Template.subscriptionsReady}}
          {{#each this.items}}
            {{> sub}}  <---------------------------------- (3)
          {{/each}}
        {{/if}}
      </form>
    </div>
  </div>
</template>

<template name="sub">
 {{#if isEqual element "payment"}}
    {{> payment}}  <--------------------------------------- (4)
  {{/if}}
</template>

<template name="payment">
  <form role="form">
    <div class="row">
      <div class="col-md-6 col-xs-12">
        <br>
        <div id="payment-form"></div>
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
    </div>
  </form>
</template>

模板：

{{1}}

Answer 1

根据我的看法，看起来您正在|块内渲染模板。这将为每个each次迭代呈现模板的一个实例。

each

请记住，每个模板实例都会触发所有回调（包括{{#each this.items}} {{> sub}} <---------------------------------- (3) {{/each}}）。如果您只想要一个实例，请将其从onRendered

中取出

Answer 2

尝试使用this package限制渲染。您还可以产生子付款（而不是检查元素）尝试检查这是否是您路线中的第一次运行。

  //html
  {{> yield sub}}

  //router
  if (Tracker.currentComputation.firstRun) {
    this.render("payment",{to:"sub"});
  }

流星模板呈现两次

2 个答案: