Javascript 有没有办法在Meteor模板之间插入？

我试图在流星列表模板中插入广告块。代码将比我描述的更容易显示：

// dataList.js
  Template.dataList.helpers({

    dataList : function() {
      return DataList.find();
    });

// dataList.html
  <template name="dataList">
    {{#each dataList}}
      <div class="col-xs-3">
        {{name}} (and other data)
      </div>
    {{/each}}
  </template>

我想要的结果是这样的

<div class="col-xs-3">
  Jon Snow
</div>
<div class="col-xs-3">    <----This inserted programmatically 
  <div id="ad">
     Buy a Destrier - 5 Golden Stags
  </div>
</div>
<div class="col-xs-3">
  Tyrion Lannister
</div>
<div class="col-xs-3">
  The Hound
</div>

其效果类似于广告中发现的效果。我不知道如何以编程方式以随机间隔插入广告。 这是一个无限卷轴，需要多次添加广告。

新想法 此外，还应稍微调整模板：

<template name="dataList">
    {{#each dataList}}
       {{#if isAd}}
           ADVERTISEMENT
      {{else}}
         <div class="col-xs-3">
            {{name}} (and other data)
          </div>
      {{/if}}
    {{/each}}
  </template>

---

如果您想插入许多广告，因为列表应该是无限的，那么最好使用它来检测新数据并相应地插入。

您可以从列表中随机选择一个id，然后在模板中该文档之后显示广告

像这样：

//.js
Template.dataList.created = function(){
  var ids = DataList.find().map( function( doc ){ return doc._id });
  this.showAdId = Random.choice( ids ); //need to add 'random' package of meteor core
};

Template.dataList.helpers({
  dataList: function(){
    return DataList.find({},{transform: function( doc ){
      doc.showAd = doc._id === Template.instance().showAdId;
      return doc;
    });
  }
});

//.html 
<template name="dataList">
  {{#each dataList}}
    <div class="col-xs-3">
      {{name}} (and other data)
    </div>
    {{#if showAd}}  <!-- check new field to see whether this is the doc with an ad -->
      <div class="col-xs-3">    
        <div id="ad">
          Buy a Destrier - 5 Golden Stags
        </div>
      </div>
    {{/if}}
  {{/each}}
</template>

---

以前的答案太复杂了；只需更新您的助手：

dataList : function() {
  var d = _.map( DataList.find().fetch(), function(v) { return {value: v}; });
  return _.union( d.slice(0,2), {
    type: 'ad',
    value: 'Buy a Destrier - 5 Golden Stags'
  } ,d.slice(2));
});

---

因此，dataList将在第三个位置插入广告。

您可能应该提到此解决方案的缺点—没有细粒度更新。您是否在野外运行过此解决方案？我希望在呈现每个循环listContainer中的所有文档之前呈现“dataList”模板。这会导致闪烁吗？我没有提到这是在一个无限的卷轴上。这个解决方案不会多次插入广告，我最喜欢这种方法，但是我仍然无法让它永久显示。它简要地显示了ADS模板，然后当加载数据时，您就看不到它了anymore@KubaWyrobek它正在添加Template.adsTemplate，但是它最终位于listContainer的底部。我已经更新了我的答案，看起来好多了，你不需要直接处理HTML。您只需创建新的本地集合并在正确的索引处填充它。Blaze关注正确的渲染。祝你好运！

//.js
Template.dataList.created = function(){
  var ids = DataList.find().map( function( doc ){ return doc._id });
  this.showAdId = Random.choice( ids ); //need to add 'random' package of meteor core
};

Template.dataList.helpers({
  dataList: function(){
    return DataList.find({},{transform: function( doc ){
      doc.showAd = doc._id === Template.instance().showAdId;
      return doc;
    });
  }
});

//.html 
<template name="dataList">
  {{#each dataList}}
    <div class="col-xs-3">
      {{name}} (and other data)
    </div>
    {{#if showAd}}  <!-- check new field to see whether this is the doc with an ad -->
      <div class="col-xs-3">    
        <div id="ad">
          Buy a Destrier - 5 Golden Stags
        </div>
      </div>
    {{/if}}
  {{/each}}
</template>

dataList : function() {
  var d = _.map( DataList.find().fetch(), function(v) { return {value: v}; });
  return _.union( d.slice(0,2), {
    type: 'ad',
    value: 'Buy a Destrier - 5 Golden Stags'
  } ,d.slice(2));
});