使用 Meteor TemplateHelper-function 和 Handlebars “延迟”渲染 HTML

Question

我正在尝试使用 Meteor TemplateHelpers 和 Handlebars 用 option 元素填充 select 元素。

模板

<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 迭代，而不是您想要的帮助器。

您还需要记住，使用 Meteor 会有一个自然延迟，因为首先加载 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}}