How To Use Reactive Var In MeteorJs
Posted By : Parveen Kumar Yadav | 27-Jun-2017
A ReactiveVar holds a single value that can be get and set, such that calling set will invalidate any Computations that called get, according to the usual contract for reactive data sources. For adding reactive var in your project simply run the following command:-
meteor add reactive-var
Reactive var is useful for holding the value reactively. To understand this lets take an example:- Suppose i want to get some data according to click on tabs say i want to get total number of new orders as clicked on new tab, total new number of completed orders as clicked on completed tab etc. So we can achieve this with the help of reactive var with pub sub so that we get the latest data without reload or refresh. In server side publication publish the collection of orders:-
Meteor.publish('orders', function(loggedInUserToken, marketplaceName){
var orders = MasterOrderDetails.find({seller_user_id: userObj._id, "order_for_marketplace.marketplace_name": marketplaceName});
return orders;
return this.ready();
})
In the template what we need to do is that we need to create a new instance of Reactive var like:-
Template.dashboard.onCreated(function(){
var instance = this;
// Order Counter for different statuses
instance.orderStatusCounterFilter = new ReactiveVar("New");
})
instance.autorun(function(){
instance.subscribe("orders", loggedInUserToken, orderCounterFilter); // calling the server side publication method.
})
Suppose i have created a method in the template which will return me the number of count of particular order according to tab clicks.
ordersCount: function(){
if (loggedInUserSubscriptionReady.ready()) {
var userObj = Users.findOne({});
var noOfOrders;
var statusFilterValue = Template.instance().orderStatusCounterFilter.get();
if(statusFilterValue === "New") {
noOfOrders = MasterOrderDetails.find({ seller_user_id: userObj._id, TFM_shipment_state: { $nin: ['Delivered', 'ReturnedToSeller']}}).count();
noOfOrders = MasterOrderDetails.find({seller_user_id: userObj._id, status:'Unshipped'}).count();
}
} else if (statusFilterValue === "Completed") {
noOfOrders = MasterOrderDetails.find({ seller_user_id: userObj._id, TFM_shipment_state: { $nin: ['Delivered', 'ReturnedToSeller']}}).count();
}
}
in the events of template:-
Template.dashboard.events({
'click #newOrdersCount': function(event, templateInstance){
templateInstance.orderStatusCounterFilter.set("New"); // setting value of reactive as click on new tab
},
'click #completedOrdersCount': function(event, templateInstance){
templateInstance.orderStatusCounterFilter.set("Completed"); // setting value of reactive var as completed on click of completed tab
}
})
Now you can easily show the data using helper in the page reactively and real time .
Hope this would help. Any queries are most Welcome. Thanks!
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Parveen Kumar Yadav
Parveen is an experienced Java Developer working on Java, J2EE, Spring, Hibernate, Grails ,Node.js,Meteor,Blaze, Neo4j, MongoDB, Wowza Streaming Server,FFMPEG,Video transcoding,Amazon web services, AngularJs, javascript. He likes to learn new technologies