How Do I Pass Input Values to Helper Functions in Meteor?

Question

I'm building an order form that extracts data from ebay listings. It has a section where you add line items, and you use a button to add another item. It adds in another instance of a template (iterated through with a lineItems helper) This works fine.

So, within that template I need it to search using the eBay api (I already have a Meteor method set up to do this which I do not want to include bc it has sensitive information). You enter the id of the eBay listing into an input, and it automatically fills in the information for the line item like the title of the listing.

So how can I pass the parameter (the listing ID that I want to get from the input value) through my getEbayItemTitle helper?

Here's my helper function:

 getEbayItemTitle: function (id) {

    Meteor.call('getEbayItemData', id, function(error, result) {
       Session.set('ebayFetch', JSON.parse(result.content));
    });
    var item = Session.get('ebayFetch');

    return item.Item.Title;
 }

And in my template: (I placed LISTING ID in place of where I have an actual listing ID)

 {{#each LineItems}}
    <!--some HTML -->
    <input type="text" class="order-ebay-id" placeholder="Ebay Id">
    <!--some HTML -->
    {{getEbayItemTitle 'LISTING ID'}}
    <!-- some HTML -->
 {{/each}}

I previously achieved this by coding it an entirely different way...I appended each line item on with jQuery as a div. But issue was, you would need to enter in the ebay listing id twice in order for the title to finally show up. So I figured I needed to use templates and helper functions so the data is reactive.

I really hope this makes sense.

Answer 1

Doing a Meteor.call() that itself calls an outside API in a helper can be expensive. Put a console.log() in your helper to see how often it's running! But back to your question, your approach of passing listingId as a parameter to your helper is correct if you know the listingID beforehand. However since it's a user input you need to instead extract it from the DOM in your helper.

 getEbayItemTitle: function(){
   var title = "";
   var listingId = $('.order-ebay-id').val();  // get value from input field
   if ( listingId.length() > 0 ){
     console.log('Meteor.call with listingId '+listingId);
     Meteor.call('getEbayItemData', listingId, function(error, result) {
       Session.set('ebayFetch', JSON.parse(result.content));
     });
     title = Session.get('ebayFetch').Item.Title;
   }
 return title;
 }

A better approach than a helper would be to tie an event to the input field.

Template.myTemplate.events({
  'blur .order-ebay-id': function(ev){
    var listingId = $('.order-ebay-id').val();  // get value from input field
    if ( listingId.length() > 0 ){
      Meteor.call('getEbayItemData', listingId, function(error, result) {
        Session.set('ebayFetch', JSON.parse(result.content));
      });
    }
  }
})

Then just have the helper return the session variable:

 getEbayItemTitle: function(){
   var title = "";
   if ( Session.get('ebayFetch') ) title = Session.get('ebayFetch').Item.Title;
   }
 return title;
 }