用流星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}}