Model Component

src/core/model.js#L4-L39

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 contact.email and get notified when those specific fields are updated.

Events

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

Example

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

Methods

Back to top

.is_dirty()

src/core/model.js#L78-L97

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

Example

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']