Question

当用户输入搜索输入时，我现在无法弄清楚如何“刷新”我的表格。

现在我的页面从我的MongoDB中提取集合，然后迭代对象数组。到目前为止一切正常：

// Pulls Data from DB
imports: function() {
var importReturn = imports.find({}).fetch();
return importReturn;
}

//Then Iterates over return value and creates an table row for each entry. 
//This #each block is also nested in another template.
{{#each imports}}
  {{> tableRowAdmin}}
{{/each}}

现在我添加了一个搜索栏，直到现在提供与搜索条目匹配的对象。但我真的不知道如何重新渲染我的模板..

//The search bar is within a separated template from the table row template 
Template.overviewAdmin.events({
'input .searchInput': function(e){
    var val = event.target.value;
    var object = imports.find(
         {$or:[
    {title: {'$regex': val, $options: 'i' }},
    {"supplier.name": {'$regex': val, $options: 'i'}},
    {"supplier.id": {'$regex': val, $options: 'i'}}
]}
        ).fetch();
    console.log(object);
}
})

//更改：

//Initializing ReactiveVar in global context
var reactiveQuery = new ReactiveVar({});


//Helper Function:
imports: function() {
var importReturn = imports.find(reactiveQuery.curValue).fetch();
return importReturn;
}

//Event:
'input .searchInput': function(e){
    var val = event.target.value;
    console.log(val);
    reactiveQuery.set(
         {$or:[
    {title: {'$regex': val, $options: 'i' }},
    {"supplier.name": {'$regex': val, $options: 'i'}},
    {"supplier.id": {'$regex': val, $options: 'i'}},
]}
        )
    console.log(reactiveQuery);

}

Answer 1

通常的做法是利用反应性。

我猜您显示的代码的第一部分是帮手？在这种情况下，只需在ReactiveVar中使用{}代替imports.find()。当然，您可以使用空对象初始化您的反应变量。

然后只需用您的查询字符串更新（set()）您的被动变量，并且反应将负责其余部分。

话虽如此，请注意由于更新每个用户输入而经常触发反应性。

问题转2之后

编辑：

reactiveQuery.curValue给出了什么？

为什么不使用reactiveQuery.get()？

我相信只有在您使用标准get()和set()方法时反应才有效。

如何使用搜索相关条目填充现有表格

1 个答案: