使用Meteor在列表UI中插入一个项目

Inserting an item into list UI with Meteor

本文关键字：一个 项目 插入 Meteor 列表 UI 使用      更新时间：2023-09-26

我正在学习Meteor，想知道是否有人可以帮助我解决这个问题。我正在建立一个gumtree风格的上市网站，以获得一些实践。

有一个listing集合显示在屏幕上，它显示了用户最近创建的所有清单。(示例代码如下)

我想知道的是，我如何在项目列表中随机插入一个横幅(考虑赞助项目样式)。我想要一个大块的HTML被插入到页面的随机点在列表中每次页面加载。

我试图将结果listing .find()放入数组中，然后在results_list.js中推送广告，但这不起作用。在做了一些阅读之后，我知道这是因为你只返回一个游标，所以我不太确定如何去做。我的背景是纯角度的

我猜是某种辅助函数，但我不确定从哪里开始，所以在正确的方向上的任何指针将是最感激的。

results_list.html 

<template name="resultsList">
    {{#each results}}
        {{> resultDetails}}
    {{/each}}
</template>

results_list.js 

Template.resultsList.helpers({
  results: function() {
    return Listings.find({}, {sort: {submitted: -1}});
  }
});

更新!

抱歉伙计们，我读了更多的文档，我想我已经解决了，我仍然想得到你对这个解决方案的反馈，虽然可能有更好的方法来做到这一点。

这应该在随机点(不包括开始和结束)添加广告。我将修改resultDetails模板，使其有一个广告为true的选项，该选项也将显示广告代码。

Template.resultsList.helpers({
  results: function() {
    var searchResults = Listings.find({}, {sort: {submitted: -1}}).fetch();
    searchResults.splice(_.random(1, results.length - 1), 0, {advertisement: true});
    return searchResults;
  }
});

一个简单的方法是修改你的resultDetails模板。

<template name='resultDetails'>
  {{#if showBanner}}
    {{> banner}}
  {{/if}}
  ..resultDetails html..
</template>

你的辅助函数可以根据随机返回showBanner:

Template.resultDetails.helpers({
  showBanner: function(){
    return Math.random()>0.98; // show the banner with probability 0.02
  }
});

如果你有像这样的规则，这将变得有点复杂，横幅必须恰好出现一次。在这种情况下，您需要基于完整光标执行逻辑(例如在onRendered处理程序中用于resultsList)，并预先计算列表中要显示横幅的位置。

相关文章：