Updating client view in MeteorJS application - meteor

Question

I'm new to MeteorJS and there is something that I'm not understanding with subscriptions and publications. I have a tablets collections. This is my setup with autopublish removed.
Server/publictions.js
Meteor.publish('tablets', function() {
return Tablets.find({}, {sort: {manufacturer: 1}});
});
In Client/view.js
Meteor.subscribe('tablets');
Template.tabletsList.helpers({
tablets: function() {
return Tablets.find();
}
});
Then in client/view.html
{{#each tablets}}
{{> tabletPreview}}
{{/each}}
This all works fine and I can see my tablets. But now I have a search box and when the search is submitted I want to update the tablets view to only show the search results.
I have a events handler but can't figure out how to update the tablets to only show the search results as the below code doesn't work. Should I use a session instead or have a totally new view.
client.view.js
Template.tabletsList.events({
"click .search": function (event, template) {
var query = $('input[name=search]').val();
Template.tabletsList.tablets = Tablets.find({manufacturer: query}, {sort: {manufacturer: 1}});
}
});

Answer 1

Here's the approach:
Add a reactive variable to your template on creation which holds the user's last search.
When the user updates the search, you should update the reactive variable.
Use the reactive variable in your helper to fetch only the matching documents.
Here is one possible implementation:
Template.tabletsList.created = function() {
// add a reactive variable to this template to track the search
this.search = new ReactiveVar('');
};
Template.tabletsList.events({
'click .search': function (event, template) {
var query = $('input[name=search]').val();
// update the search based on the user's input
template.search.set(query);
}
});
Template.tabletsList.helpers({
tablets: function() {
// read the user's last search (if any)
var search = Template.instance().search.get();
// sort options
var options = {sort: {manufacturer: 1}};
if (search.length) {
// find all tablets matching the search expression
var re = new RegExp(search);
return Tablets.find({manufacturer: re}, options);
}
else {
// if the user didn't input a search just find all tablets
return Tablets.find({}, options);
}
}
});
Notes:
See this post for more details on scoped reactivity.
Sorting in a publish doesn't really do anything for you in most cases. See my article on common mistakes.