Model Component

Model is a component that offers new features for isolating business logic in your application. It offers default values, dirty values, and deep events on your data.

All data should be accessed via the appropriate methods .get, .set, and .data for the proper events to be triggered. It is not encouraged to access them directly.

Dirty values make it simple to inspect a model and see what values have changed.

Deep events allow you to bind to specific fields, like name or even deep fields like and get notified when those specific fields are updated.


When any data on the model has changed.
When the specific key on the model has changed.
The nested key value has changed.


Crafty.c('Person', {
  name: 'Fox',
  init: function() { this.requires('Model'); }
person = Crafty.e('Person').attr({name: 'blaine'});
person.bind('Change[name]', function() {
  Crafty.log('name changed!');
person.attr('name', 'blainesch'); // Triggers event
person.is_dirty('name'); // true
person.changed // name


Back to top


Helps determine when data or the entire component is "dirty" or has changed attributes.


person = Crafty.e('Person').attr({name: 'Fox', age: 24})
person.is_dirty() // false
person.is_dirty('name') // false

person.attr('name', 'Lucky');
person.is_dirty(); // true
person.is_dirty('name'); // true
person.is_dirty('age'); // false
person.changed; // ['name']