流星模板呈現兩次

流星客戶端Template.payment.onRendered被觸發兩次，其中兩次調用服務器端方法，如何才能讓它在一次渲染兩次的情況下觸發後端方法，否則它如何才能獲得它只渲染一次？ THX流星模板呈現兩次

//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); 
     } 
    }); 
} 
}); 
});

模板：

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

來源

2017-03-16 Fred J.

是你的''getClientToken「'方法服務器只或者客戶端和服務器？ – ghybs

在服務器上定義，並由客戶端調用 –

基於我所看到的，它看起來像你渲染each塊內模板。這將爲每個each迭代渲染一個模板實例。

{{#each this.items}} 
    {{> sub}} <---------------------------------- (3) 
{{/each}}

請記住，每個模板實例會觸發其所有的回調（包括onRendered）。如果您只想要一個實例，請將其取出each

來源

2017-03-16 00:55:38 jordanwillis

但是，只有一個文檔用於提供數據的集合中的「付款」模板。並且我檢查了它在文檔添加時僅循環一次。每個文檔都是一個html元素，因此我可以通過修改提供的文檔輕鬆地將元素添加到html中。我會嘗試發佈代碼。 –

嗯...所以你最終只有1個提交按鈕呈現當你加載頁面？ – jordanwillis

是的。只有一個提交按鈕。請參閱我將很快發佈的圖片，其中顯示2個付款表單，而不是唯一預期的按鈕。 –

嘗試使用this package限制呈現。您也可以支付子付款（而不是檢查元素），嘗試檢查這是您的路線中的第一次運行。

//html 
    {{> yield sub}} 

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

來源

2017-03-16 08:39:13 mutdmour

這是一個單頁應用程序，不使用路由器。所以'{{> yield sub}}'代替'{{> sub}}'給了很多瀏覽器錯誤，頁面沒有加載。我添加了konecty：nrr包，並用'{{#nrr nrrargs'sub'element = element}} {{/ nrr}}'替換了'{{> sub}}'，如果我做得正確，某些模板不會完全呈現，特別是有問題的付款模板。 –

流星模板呈現兩次

回答

相關問題