ember-autosave
v3.0.0
Published
Periodically save models as they are modified.
Downloads
995
Readme
Ember Autosave
Ember Autosave periodically saves your models when their properties are set.
Installation
ember install ember-autosave
Compatibility
If you are using a version of Ember before 3.x you many need to use an older version of this library.
| Ember Version | Ember Autosave | | -----------------|----------------------| | 1.8 through 1.13 | 0.3 | | 2.0 | 1.x & 2.x | | 3.0 and beyond | 3.x |
Usage
The primary way to use this addon is with the computed property macro called 'autosave'. You can also use underlying AutosaveProxy object.
Using autosave
The ember-autosave
package provides a computed property macro to wrap an
object in an AutosaveProxy.
In this example, the proxy will call save()
on the object stored in the
component's model
property one second after one of its properties is set
.
import Ember from 'ember';
import autosave from 'ember-autosave';
export default Ember.Component.extend({
post: autosave('model')
});
It might be the case that the model data you're working with is internal to a
component and was not passed in as an attribute. In this case you don't have to
pass a string representing a property to autosave
. The library will store
attributes on a blank object that will be passed to a provided save function.
import Ember from 'ember';
import autosave from 'ember-autosave';
const { inject } = Ember;
export default Ember.Component.extend({
store: inject.service();
post: autosave({
save(attributes) {
this.get('store').createRecord(attributes).save();
}
})
});
Using AutosaveProxy
You may also use the AutosaveProxy object directly.
import Ember from 'ember';
import { AutosaveProxy, flushPendingSave } from 'ember-autosave';
export default Ember.Component.extend({
didReceiveAttrs() {
this._super(...arguments)
this.post = AutosaveProxy.create(this.get('model'));
}
});
Historically this project was used with Ember Data which keeps long-lived model objects. This side-steps some common timing issues where a pending save function is called after a model is destroyed. Depending on your situation, you may find it necessary or desirable to cancel or immeidately flush a pending save.
import Ember from 'ember';
import { AutosaveProxy, flushPendingSave, cancelPendingSave } from 'ember-autosave';
export default Ember.Component.extend({
didReceiveAttrs() {
this._super(...arguments);
flushPendingSave(this.post);
this.post = AutosaveProxy.create(this.get('model'));
}
willDestroy() {
this._super(...arguments);
cancelPendingSave(this.post);
this.post = AutosaveProxy.create(this.get('model'));
}
});
Advanced Configuration
By default, an AutosaveProxy object will call save()
on its target once input stops
for 1 second. You can configure this behavior globally or for each AutosaveProxy
instance.
Global Configuration
You can configure AutosaveProxy
from anywhere, but you should probably use an
initializer.
import Ember from 'ember';
import { AutosaveProxy } from 'ember-autosave';
export function initialize() {
AutosaveProxy.config({
saveDelay: 3000, // Wait 3 seconds after input has stopped to save
save(model) {
model.mySpecialSaveMethod()
}
});
}
export default {
name: 'setup-ember-autosave',
initialize: initialize
};
Per Instance Configuration
With the autosave
computed property:
import Ember from 'ember';
import autosave from 'ember-autosave';
export default Ember.Component.extend({
post: autosave('model', {
saveDelay: 3000,
// Can be a function or a string pointing to a method.
save: 'specialSave'
})
specialSave(model) {
// Your special save logic here
}
});
With the AutosaveProxy object.
import Ember from 'ember';
import { AutosaveProxy } from 'ember-autosave';
export default Ember.Component.extend({
didReceiveAttrs() {
this.post = AutosaveProxy.create(
this.get('model'),
{ saveDelay: 3000, save: (model) => model.specialSave() }
);
},
});
Demo
To see a demo of this addon you can clone this repository, run ember server
,
and visit http://localhost:4200 in your browser.
Upgrading to 1.0
There is one breaking change when migrating from an earlier version to 1.0. In
earlier versions, configured save
functions were invoked with the context of
the proxy target.
import Ember from 'ember';
import autosave from 'ember-autosave';
export default Ember.Component.extend({
post: autosave('model', {
save() {
// `this` is the model property
this.save();
}
})
});
In 1.0 the context of the save
function is the instance of the object where
the autosave property was defined (probably what you would expect). The save
method receives the model as an argument.
import Ember from 'ember';
import autosave from 'ember-autosave';
export default Ember.Component.extend({
someProp: 'hi',
post: autosave('model', {
save(model) {
this.get('someProp'); // 'hi'
model.save();
}
})
});
Globally configured save functions will need to be updated.
Pre 1.0:
AutosaveProxy.config({
save() {
this.mySpecialSaveMethod();
}
});
1.0 and beyond:
AutosaveProxy.config({
save(model) {
model.mySpecialSaveMethod();
}
});
Upgrading to 2.0
Version 2.0 has one semantic change that better aligns it with typical
Ember.set behavior. Before 2.0, setting a property to the same value would
trigger a change (render) and enqueue a save
. In 2.0, if the set property
===
the previous value, save
will not be called and Ember will not be
notified of a property change.
Upgrading to 3.0
Previously, the AutosaveProxy's model was set using the content
property
(mirroring the behavior of Ember.ObjectProxy). This caused issues for users
that had a content
property on their models. Now AutosaveProxy
objects
are created without specifying a key (AutosaveProxy.create(model)
) and
models can freely use the content
key.
Pre 3.0:
AutosaveProxy.config({ content: model });
3.0 and beyond:
AutosaveProxy.create(model);
Additionally 3.0 is only guaranteed to be compatible with Ember 3.x because of a change in Ember's property change notification API.