如何将输入值传递给Meteor中的助手函数?

时间:2015-08-24 18:21:17

标签: javascript meteor spacebars

我正在构建一个从ebay列表中提取数据的订单。它有一个部分,您可以在其中添加行项目,并使用按钮添加另一个项目。它添加了另一个模板实例(使用lineItems帮助器迭代)这很好。

因此,在该模板中,我需要使用eBay api进行搜索(我已经设置了一个Meteor方法来执行此操作,我不想包含bc它有敏感信息)。您将eBay列表的ID输入到输入中,它会自动填写行项目的信息,如列表标题。

那么如何通过我的getEbayItemTitle帮助器传递参数(我想从输入值获取的列表ID)?

这是我的助手功能:

 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;
 }

在我的模板中: (我将 LISTING ID 放在我拥有实际商家信息ID的位置)

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

我之前通过编码它以完全不同的方式实现了这一点...我用jQuery作为div附加每个行项目。但问题是,你需要两次输入ebay列表ID才能最终显示标题。 所以我想我需要使用模板和辅助函数,因此数据是被动的。

我真的希望这是有道理的。

1 个答案:

答案 0 :(得分:1)

执行自己在帮助程序中调用外部API的Meteor.call()可能会很昂贵。将console.log()放入助手,看看它的运行频率!但回到您的问题,如果您事先知道 listingID ,那么将 listingId 作为参数传递给助手的方法是正确的。但是,由于它是用户输入,因此您需要从帮助程序中的DOM中提取它。

 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;
 }

比帮助程序更好的方法是将事件绑定到输入字段。

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));
      });
    }
  }
})

然后让助手返回会话变量:

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