用流星TemplateHelper函數和把手渲染HTML「晚」

Question

我想用option元素填充select元素，使用流星TemplateHelpers和Handlebars。

模板

<template name="newTransaction"> 
... 
<select name="productNameSelect"> 
{{{ getProductOptions }}} 
</select> 
... 
</template> 

助手

Template.newTransaction.getProductOptions = function() { 
    //Get all products for drop-down 
    var count = 0; 
    var optionsHTML = ""; 
    var options = ProductCollection.find({}); 
    options.forEach(function(product) 
    { 
     var newOption = "<option value='" + product.productID + "' >" + product.name + "</option>"; 
     optionsHTML += newOption; 
     ++count; 
     if(count == options.count()) 
     { 
     console.log("Products returned for client:" + optionsHTML) 
     return optionsHTML; 
     } 
    }); 
}; 

在瀏覽器JavaScript控制檯正確的控制檯日誌文本打印，但在我的選擇列表中沒有的選項被添加到DOM。

我所有的其他小幫手功能都能正常工作，雖然它們更簡單，可能不會花費太多時間。我如何正確渲染選項元素？

Answer 1

這是因爲您使用了forEach迭代器。當您返回回調時，它將返回到forEach迭代，而不是您想要的助手。

您還需要記住流星會在html和js首先加載時產生自然延遲，隨後數據會很快出現。

您仍然可以使用forEach，但要確保在循環之後返回數據，而不是循環中的數據。我不是100％肯定你的意圖，從而你打算這可能無法正常工作，但你

var options = ProductCollection.find({}); 
var html = "";  

options.forEach(function(product) 
{ 
    var newOption = "<option value='" + product.productID + "' >" + product.name + "</option>"; 
    optionsHTML += newOption; 
}); 

return optionsHTML; 

也不要忘記使用三個髭{{{getProductOptions}}}而不是兩個，因爲你提供回原始的HTML

也有你考慮使用{{each}}循環？

Template.newTransaction.getProductOptions = function() { return ProductCollection.find() } 

，那麼你可以在你的HTML而不是

{{#each getProductOptions}} 
    <option value="{{productID}}">{{name}}</option> 
{{/each}}