this.findAll對子模板不起作用

當我嘗試在選擇器位於子模板中的模板上使用this.findAll時，findAll不返回任何內容。this.findAll對子模板不起作用

這裏的HTML：

<template name="products"> 
    {{#each productList}} 
     {{> product }} 
    {{/each}} 
</template> 
<template name="product"> 
    <div class="box">{{name}}</div> 
</template>

這裏的JS：

Template.products.helpers({ 
    productList: function() { 
     var all = Products.find({}).fetch(); 
     return all; 
    } 
}); 
Template.products.rendered = function(){ 
    var boxes = this.findAll('.box'); 
    console.log(boxes.length); 
}

boxes.length的輸出爲0的任何想法，我怎麼能拿「盒子」的元素？

來源

2014-06-05 ian

以下是正確的答案。我已經添加到了我的鐵路由器的路由：

action : function() { 
    if (this.ready()) { 
     this.render(); 
    } 
}

從https://stackoverflow.com/a/23576039/130237找到了答案，而我試圖解決不同的問題。

來源

2014-06-06 03:56:03 ian

按照文檔的findAll：

模板及其子模板裏面只有元素可以匹配選擇的部分。

所以它應該適用於子模板。我嘗試了一系列固定的產品，它的工作原理是這樣的，這意味着您只需在rendered的調用和正在提取的產品之間看到延遲。例如，如果你這樣做：

Template.products.events({ 
    'click .box': function (e, t) { 
    var boxes = t.findAll('.box'); 
    console.log(boxes.length); 
    } 
});

然後，如果你點擊其中一個框，你應該看到正確的號碼記錄到控制檯。總之，我認爲測試可能是無效的。如果您使用鐵路路由器，則可以嘗試爲產品添加waitOn，以確保它們在呈現的呼叫之前到達。

來源

2014-06-05 04:34:59

看着實際的頁面，我確實觀察到有某種延遲。在產品出現在頁面之前，console.log已顯示輸出。我使用鐵路路由器，並使用waitOn產品。所有產品加載完成後，我需要運行腳本。任何其他想法？ – ian

這並不容易，因爲在加載收集數據時，流星並不真正具有「完成」的概念。添加其他產品時會發生什麼？如果答案是再次運行你的函數，那麼我建議你考慮一種使用'product.rendered'而不是'products.rendered'的方法。注意 - 值得一提的是，你可以在任何一個函數中使用'$（'。box'）'來獲取頁面上的所有框，儘管如果你有多個'products'實例可能沒有意義。模板。 –

謝謝大衛！你給了我如何解決它的想法。我會在一段時間後發佈答案。 – ian

以下是我在加載所有產品後運行腳本的操作。

我在所有產品中添加了last_product屬性。

Template.products.helpers({ 
    productList: function() { 
     var all = Products.find({}).fetch(); 
     var total = all.length; 
     var ctr = 0; 
     all.forEach(function(doc){ 
      doc.last_product = false; 

      ctr++; 
      if(ctr == total) 
      { 
       doc.last_product = true; 
      } 
      return doc; 
     }); 
     return all; 
    } 
});

然後，我使用「Template.product」來檢測最後一個產品是否被渲染，而不是「Template.products」。當最後一個產品被渲染時，運行腳本。

Template.product.rendered = function(){ 
    if(this.data.last_product){ 
     var boxes = $('.pbox'); 
     console.log(boxes.length); 
    } 
}

boxes.length現在具有正確的長度。

感謝David的想法！

來源

2014-06-05 06:12:12 ian

this.findAll對子模板不起作用

回答

相關問題