<h1>Test</h1>
var person = {
  events: {},
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  },
  setPersonData: function(personData) {
    $.extend(this, personData);
    $(this.events).trigger('changed', personData);
  }
};
var renderCount = 0;
$(person.events).on('changed', function() {
  renderCount += 1;
  $('h1').text(person.fullName() + ' render count: '+ renderCount);
});

// this will trigger every time
_.times(10, function() {
  person.setPersonData({age: _.random(20)});
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js