javascriptmeteorspacebarsmeteor-collections

How Do I Display Data From Two Different Collection's Documents in Spacebars #each Tag?


I have 2 Collections (one of which is a standard Collection and the other is a CFS Collection to store my uploaded images):

Products = new Mongo.Collection('products');

and

Uploads = new FS.Collection('uploads', {
  stores: [new FS.Store.FileSystem('uploads', {path: '~/projectUploads'})]

});

Some documents inside the Products collection has a field or key/value pair of 'product_main_image' which stores the filename of the uploaded file that is stored in the Uploads CFS collection.

On my page I set a helper:

Template.admin_products.helpers({

  products: function(){
    console.log('inside helperproduct');

    return Products.find();
  }

});

and in the html I have:

{{#each products}}
    {{product_name}}
    {{product_main_image}}
  {{/each}}

But instead of the actual filename as displayed by {{product_main_image}} I would like to display the uploaded file as if I accessed it using this code:

Uploads.findOne({"original.name":product_main_image});

This page is where I display all of the products using {{#each products}} and I would also like to display the image for each product that is stored in the Uploads CFS Collection.

Is this possible? and how may I achieve this? Thank you...


Solution

  • Is this possible? Yes

    how may I achieve this?

    You can use the context of this. on the Uploads.findOne()

    This is how the HTML should look.

    {{#each products}}
       {{product_name}}
       {{product_main_image}}
        {{#with image}}
          <img src="{{this.url}}" />
        {{/with}}
     {{/each}}
    

    And the image helper.

    Template.example.helpers({
      image:function(){
        Uploads.findOne({"original.name":this.product_main_image});
       }
    })
    

    Here is a quick MeteorPad showing how can you achieve this (im using 2 dummy collection but the idea is the same)