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!

Request for Proposal

Recaptcha is required.

Sending message..