I am currently diving into the world of Meteor and could really use some assistance with an issue I've encountered. As part of my learning process, I am working on building a gumtree style listing website to hone my skills.
The website displays a Listings collection that showcases the most recent listings created by users (see sample code below).
My question is, how can I dynamically insert a banner ad into the list of items, similar to a sponsored item? I want a random HTML chunk to be added to the page at different points in the list every time the page loads.
I attempted to populate the results from Listings.find() into an array and then insert the ad in results_list.js, but unfortunately, it was not successful. After some research, I realized that this approach doesn't work because only a cursor is being returned, and I'm struggling to figure out a solution. My background is mostly Angular, so I'm a bit lost here.
I believe a helper function might be the key, but I'm unsure where to begin. Any guidance or pointers in the right direction would be highly appreciated.
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}});
}
});
UPDATE!
Apologies for the confusion earlier. Upon further reading, I believe I've figured it out. However, I would still appreciate your feedback on this solution, as there may be a better way to accomplish this task.
This implementation will place an ad randomly within the list (excluding the beginning and end). I plan to modify the resultDetails template to include an option for displaying the advertisement code as well.
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;
}
});