How to detect when a reactive element is updated in a meteor

Question

I have a standard template that executes {{#each}} with a list of reactive elements from the collection.

The problem I am facing is that I want the change in the font property of a particular element whenever it is being updated in the collection, just to make sure that it has been updated.

I could not find a good / elegant way to do this. Can someone point me in the right direction? Thanks!

Answer 1

you can check the observation cursor, when some documents are updated or changed, you can do anything, for example, if an event is triggered.

li#model-1273927381273 model-1273927381273 Modal.find().observe changed: (newDocument, oldDocument) -> ($ '#model-'+ newDocument._id).action() http://docs.meteor.com/#observe i use similar code currently but dont know how to prevent init documents load. 

Answer 2

As with your question, I would like to “unwind” the div whenever a particular session variable (GPS location) has changed. My solution is below.

in / client / main.js:

 Session.setDefault('lat', 0); Session.setDefault('lng', 0); Session.setDefault('locationChange', 1); 

and

 Meteor.setInterval(function() { getLocation(); }, 5000); function getLocation() { Location.locate(function(pos){ var oldLat = Session.get("lat"); var oldLng = Session.get("lng"); Session.set('lat', pos.latitude); Session.set('lng', pos.longitude); if (oldLat != Session.get("lat") || oldLng != Session.get("lng")) Session.set("locationChange", -1 * Session.get("locationChange")); }, function(err){ console.log("Location not obtained: ", err); }); } 

In the template, say /client/templates/someTemplate.html, where I want to warn the user about the change:

 <span class="glyphicon glyphicon-screenshot" aria-hidden="true" data-locationChange='{{locationChange}}'></span> 

In the linked javascript file, say /client/templates/someTemplate.js:

 Template.appBody.helpers({ locationChange: function() { $("#locationIcon").fadeOut(100).fadeIn(100); return Session.get("locationChange"); }, }); 

So, now that the GPS coordinates change (not necessarily when they are updated), the value for 'locationChange' translates from 1 to -1 or vice versa. This launches the 'locationChange' helper, which updates the (meaningless) attribute of 'data-locationChange', but also runs some jQuery script that blinks in the template.