我如何将输入值传递给 Meteor 中的辅助函数?
How Do I Pass Input Values to Helper Functions in Meteor?
我正在构建一个从 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;
}
在我的模板中:
(我用 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 listing id 中输入两次才能最终显示标题。
所以我认为我需要使用模板和辅助函数,以便数据是反应性的。
我真的希望这是有道理的。
在助手中执行本身调用外部 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));
});
}
}
})
然后让助手 return 会话变量:
getEbayItemTitle: function(){
var title = "";
if ( Session.get('ebayFetch') ) title = Session.get('ebayFetch').Item.Title;
}
return title;
}
我正在构建一个从 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;
}
在我的模板中: (我用 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 listing id 中输入两次才能最终显示标题。 所以我认为我需要使用模板和辅助函数,以便数据是反应性的。
我真的希望这是有道理的。
在助手中执行本身调用外部 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));
});
}
}
})
然后让助手 return 会话变量:
getEbayItemTitle: function(){
var title = "";
if ( Session.get('ebayFetch') ) title = Session.get('ebayFetch').Item.Title;
}
return title;
}