How to create a simple auto save feature in Ember

Sunday, October 26th 2014

I recently decided to rewrite my blog in an Ember app. The previous platform I used was WordPress and one of the features I really loved about WP was their auto save. Obviously since I'm creating my own platform it's totally up to me to create features I'd need.

It's simple in JS!

Ah, yes. It's really simple to create an auto save function in pure JS. Just do a set timeout function and.. call it a day.

window.setTimeout(function(){
  //ajax yo stuff!
}, 6000);

Simple right? But that's not the ember way. I read a blog post that said doing things out side of the ember way causes a lot of headaches down the road. I tend to agree. Why would you build something in an opinionated framework without using their conventions? So let's do that! :D

Doing it the Ember way

I have a posts resource that has an index, new, edit, and show inside of it. I want my posts to auto save when they're editing the post.

I chose this way because if you did an auto save while creating a new post it will have to create a record in the backend before actually having any data. I saw that having some big downsides like creating a ton of dead records.

So, inside of my posts edit controller I have this little function:

autoSave: function () {
  Ember.run.later(this, function() {
    if(this.get("isDirty")){
      var alert = Em.$(".alert");

      this.model.save().catch(function(reason){
        if(reason.status === 500){
          alert.text("Server error. Couldn't auto save.");
        }
      });

      alert.text("Your post was auto saved");

      window.setTimeout(function(){
        alert.text("");
      }, 6000);
    }
    this.autoSave();
  }, 120000); //120000 = 2 mins
}

A couple of notes from this:

  • Using Ember.run.later is the proper way to do a setTimeout type function. It adds it to the Ember run loop which is a huge help for testing! You can read little more about why in this StackOverflow question
  • Every 2 mins I check if the content I have entered in the text area has changed by calling if(this.get("isDirty")). If the content isDirty (aka has it changed?) then I save the record.
  • If on save there is a 500 error I populate a div on the page with the class alert to say there was an error. I'm sure I could do more advanced things to show what error, why, and how to fix it. But that's for later :)
  • If there wasn't an error I use the alert div to show a message saying the content has been auto saved successfully.

How can we make this better?

This is a good question. I bet we could use the Notification API to alert the user when the post has auto saved just in case they have navigated away from the tab the post is in.

We could also somehow make this a setting that's adjustable by the user. But my blogging "platform" isn't mature enough (or used enough) to warrant that. It would be neat to tackle that though!

Conclusion

It was fun to try and figure out this problem and do it the Ember way. I'm sure there are better ways to do this, which is partly why I wrote this blog post. If you can offer any feedback I'd appreciate it greatly! You can browse the source code for my site here.