Update backbone model on change of global variable? - backbone.js

Question

I have a Collection of Venue objects which all have their own lat/long properties, using this and the users position I can calculate the distance between user and each venue.
My issue is that I can't only do this when the Venue objects are created so need to trigger this calculation when the position variable is updated, either by watching the position variable or by triggering a function, I'm not having much success with either method.
window.App = {};
// Venue Object
App.Venue = Backbone.Model.extend({
urlRoot: '/rest/venue',
defaults: {
distance: ''
},
initialize: function(){
console.log(App.position);
this.set('distance', getDistance(App.position.coords.latitude, App.position.coords.longitude, this.get('latitude'), this.get('longitude')));
},
events: {
// Doesn't seem to work
App.position.on('change', function() { console.log('change event'); })
},
updateDistance: function() {
console.log('updateDistance');
}
});
// Venues Collection Object
App.Venues = Backbone.Collection.extend({
url: '/rest/venues',
model: App.Venue,
comparator: function(venue) {
return venue.get('name');
}
});
$(document).ready(function(){
// Setup Model
App.venues = new App.Venues();
App.venues.fetch();
navigator.geolocation.watchPosition(gotPosition);
function gotPosition(position) {
console.log(position);
App.position = position;
// Somehow trigger updateDistance function on all model objects?
}
});
What is the correct approach here?

Answer 1

There are two ways of dealing with this.
Position is a Backbone.Model
If your position is a backbone model as opposed to a simple variable then you could do something like:
// Give the position to each venue
App.venues = new App.Venues({position: position}); //doesn't matter if the position variable is just empty right now.
in your App.Venue model initialize method:
App.Venue = Backbone.Model.extend({
...
initialize: function(options) {
this.position = options.position //save the reference
this.listenTo(this.position, "change", positionChanged) //now your venue model is watching this position object. any change and positionChanged method will be called
},
positionChanged: function (model) {
// position updated
}
Global Event Aggregator
So incase for some reason you don't have position as Backbone model, then you could setup your own event aggregator by extending Backbone.Events module:
App.vent = _.extend({}, Backbone.Events);
Whenever position is updated, you trigger an event:
function gotPosition(position) {
console.log(position);
App.position = position;
App.vent.trigger("position:updated") // you could name this event anything.
}
In your Venue model you listen to the events:
App.Venue = Backbone.Model.extend({
...
initialize: function(options) {
App.vent.on("position:updated", this.positionChanged)
},
I would prefer the first method !