Question

I’m wondering how to attach an event listener to a variable… I know that sounds super weird so here’s what I’m working with.

B.viewController = function() {
  var view = 'large';

  var update = function() {
    if($(window).width() >= 481) {
      var new-view = 'large';
      return view == new-view
    } else {
      var new-view = 'mobile';
      return view == new-view;
    }
  }

  update();

  $(window).resize(function() {
    update();
  });
};

now i’d like to expand this so that I can attach it as an event listener so for example I could use this to do something like coolImage.bind(‘B.viewController’, callback) So that if the view changes the callback is called without having to attach a resize listener to the window…

Answer 1

You may want to custom events to do the job.

Here is an example:

var Publisher = {}, Subscriber = {}, EVENT_NAME = 'publisher.updated',
    PubSub = $({});

Publisher.update = function() {
    PubSub.trigger(EVENT_NAME);
};

Subscriber.onUpdate = function() {
    alert('Received update!');
};

PubSub.bind(EVENT_NAME, Subscriber.onUpdate);
Publisher.update();

Publisher triggers an event when update is called, and Subscriber listens to the event when the event is triggered.

Applying this to your case, when B.viewController is updated, you can call PubSub.trigger('view.updated') to trigger an update event. And then, have coolImage listen to the event by PubSub.bind('view.updated', coolImage.onViewUpdated).

Credit/Reference

• JSFilddle of the PubSub code: http://jsfiddle.net/cwZZE/17/
• PubSub idea is borrowed from Ben Alman’s Tiny Pub/Sub library: https://gist.github.com/799721/c119783954e1b10551c4afef53b2c04fefcb7465