npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-autosave

v3.0.0

Published

Periodically save models as they are modified.

Downloads

819

Readme

Ember Autosave Build Status

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.