Filtering with FlowRouter

In this post I just want to share an example of a simple filter that I’ve made with FlowRouter and show you how simple is to do that.

 

If you don’t know, please, visit the FlowRouter repository, I promise, you’ll not regret!

 

After that I recommend another good reading, Meteor UI Pattern: Keeping App State on the URL.

Before I show you “all” the code necessary to implement this filter, take a look at this image and pay attention to the URL. FlowRowter watches for changes in the routes, making it reactive and useful to keep the application state, this is util in many ways but an simple example is sharing, you can share exactly what you want if you use the url to keep the application state.

 

 

Publishing

 

There’s no secret with publishing, I used the same old way to do publish. Ah, this Roles.userIsInRole is another nice package, used to define Roles (alanning/meteor-roles).

 

[code language=”javascript”]
Meteor.publish(‘Users’,function(limit){
if (Roles.userIsInRole(this.userId,PERFIL.ADMIN)) {
return Meteor.users.find({},{sort:{createdAt: -1},limit:limit},FS.Users());
}
});
[/code]

 

Defining a route and subscribing

 

Here you can see a route defined with FlowRouter, once again that’s no surprises, the same old Meteor.subscribe.

 

[code language=”javascript”]
FlowRouter.route(‘/admin/listar/:amount/usuarios’,{
subscriptions: function(params, queryParams) {
this.register(‘users’, Meteor.subscribe(‘Users’,parseInt(params.amount)));
},
action: function(params) {
if (Roles.userIsInRole(Meteor.user(),PERFIL.ADMIN)) {
FlowLayout.render(‘Layout’, { main: "Users" });
}else{
FlowLayout.render(‘Layout’, { main: "NotAuthorized" });
}
}
})
[/code]

 

The keyup event

 

To make this filter real-time I used a keyup event to get what user is writing and setting the url query parameter. You do that using  FlowRouter.setQueryParams, see that there’s an if setting ‘name’ undefined if the variable value is empty, this is how FlowRouter removes query parameters from url, when the value is null or undefined.

 

[code language=”javascript”]
Template.Users.events({
‘keyup .filter-by-name’: function(e) {
e.preventDefault();
var name = $(‘.filter-by-name’).val();
if(!_.isEmpty(name)){
FlowRouter.setQueryParams({name: name});
}else{
FlowRouter.setQueryParams({name: undefined});
}
}
});
[/code]

 

Defining the helper

 

I decide to put this snippets here because it was one of my doubts when I used FlowRouter for the first time, how can I get the value of an subscription? Different from Iron-Router, FlowRouter doesn’t have an built in waitOn, you subscribe and register your subscription with an name, that’s it, eg:

[code language=”javascript”]
this.register(‘users’, Meteor.subscribe(‘Users’,parseInt(params.amount)));
[/code]

this.register(‘users’, Meteor.subscribe(‘Users’,parseInt(params.amount)));

 

So, you can define your own “waitOn”, registering a function to check if your subscription is ready or not, in my case “isReady”.

 

[code language=”javascript”]
{{#if isReady "users"}}
{{#each getUsers}}
{{> User}}
{{/each}}
{{/if}}

Handlebars.registerHelper("isReady", function(sub) {
if(sub) {
return FlowRouter.subsReady(sub);
} else {
return FlowRouter.subsReady();
}
});
[/code]

 Ok knowing that, let’s see the final step, when FlowRouter detects url parameter changes and propagate it to our app.

How you can see when we call getUsers helper, FlowRouter get the query parameter called ‘name’ from URL to be used to build the mongo query so, when user write something and the value of this parameter changes, this code automatically run again, filtering according with was written.

 

[code language=”javascript”]
Template.Users.helpers({
getUsers:function(){
var query = {};
var name = FlowRouter.getQueryParam("name");
if(name){
query["profile.details.name"] = {‘$regex’: new RegExp(name, "i")};
}
return Meteor.users.find(query,{sort:{"pofile.details.name": 1}});
}
});
[/code]

 

Conclusion

 

Pretty nice isn’t? This is my first project using Flow-* but I already can see how powerful and different it is, give it a try in your next project I’m sure you’ll enjoy it.

Leave a Reply