0

Meteor TemplateHelpers と Handlebars を使用して、select要素に要素を設定しようとしています。option

テンプレート

<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 に追加されません。

他の小さなヘルパー関数はすべて適切に機能しますが、はるかに単純で、それほど時間はかからない可能性があります。オプション要素を正しくレンダリングするにはどうすればよいですか?

4

1 に答える 1

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 を返すため、口ひげを 2 つではなく 3 つ使用することを忘れないでください。

{{each}}また、ループの使用を検討しましたか?

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

次に、代わりにhtmlでこれを行うことができます

{{#each getProductOptions}}
    <option value="{{productID}}">{{name}}</option>
{{/each}}
于 2013-09-26T15:53:22.373 に答える