javascript - 如何将输入值传递给 Meteor 中的辅助函数？

Question

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

因此，在该模板中，我需要它使用 eBay api 进行搜索(我已经设置了一个 Meteor 方法来执行此操作，但我不想包含它，因为它包含敏感信息)。您在输入中输入 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;
 }

在我的模板中:(我将列表 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 两次才能最终显示标题。所以我认为我需要使用模板和辅助函数，以便数据具有反应性。

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

Answer 1

在助手中执行 Meteor.call() 本身调用外部 API 的成本可能会很高。在您的助手中放置一个 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;
 }

比助手更好的方法是将事件绑定(bind)到输入字段。

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

然后让助手返回 session 变量:

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