Say you are building a form, what’s the best way to handle the state of an underlying model? How do you revert unwanted changes? Do you use a buffer or take snapshots? What if your model has relationships, and those relationships have relationships?
While Ember is a leading framework for building ambitious applications, it lacks the important ability to manage complex object state. Introducing Ember Time Machine, an addon that challenges this current issue and its limitations with a single command solution.
- Support for both Ember Objects and Arrays, as well as, Ember Data models
- Tracks nested relational changes out of the box (including
hasManyandbelongsTorelationships) - Ability to revert array manipulations as well as object property changes
- No buffer used so all changes are made on the actual model
- Intelligently batches property changes when undoing and redoing
ember install ember-time-machine
If it is a bug please open an issue on GitHub.
Note: Ember Time Machine can be used with plain objects and arrays. This example is used to show the true potential of this addon
// models/user.js
export default DS.Model.extend({
firstName: attr('string'),
lastName: attr('string'),
username: attr('string'),
avatar: attr('string'),
settings: DS.belongsTo('setting'),
tasks: DS.hasMany('task')
});Setup
import TimeMachine from 'ember-time-machine';
const user = this.store.peekRecord('user', 1);
const timeMachine = TimeMachine.Object.create({ content: user });Manipulate
/** Basic Manipulations **/
timeMachine.set('username', 'offir.golan');
/** Nested Array Manipulations **/
timeMachine.get('tasks').setEach('isCompleted', true);
timeMachine.get('tasks').pushObject(this.store.createRecord('task'));
/** Nested Object Manipulations **/
timeMachine.set('settings.newOnTop', false);Time Travel
timeMachine.undo(1, { on : [ 'username' ] }); // Undo the last username change
timeMachine.undo(1, { on : [ 'tasks' ] }); // Undo the last tasks change. This will undo the newly added task via pushObject
timeMachine.undo(2, { on: [ '[email protected]' ] }); // Undo the last 2 isCompleted changes on the tasks collection
timeMachine.undoAll({ on: [ 'settings.*' ] }); // Undo all changes on the settings object
timeMachine.undoAll(); // Undo all changes
timeMachine.redo(1, { on : [ 'username' ] }); // Redo the last undone change to username
timeMachine.redoAll(); // Redo all changes that have been undone