Series: Editing and Validating Forms with ember-changeset
Advanced ember-changeset-Visualizing Changes
Published on Aug 12, 2016
There's lots of cool things you can do with ember-changeset beyond the basics.
This video explores the possibilities that the changes property gives us- including displaying our pending changes, cancelling changes to individual properties, and keeping a history of past changes.
Links
Code
//templates/components/monster-form.hbs
<ul>
{{#each changeset.changes as |change|}}
<li>
{{change.key}}: {{get changeset._content change.key}} -> {{change.value}}
<button {{action 'restore' change.key}}>Restore</button>
</li>
{{/each}}
</ul>
//components/monster-form.js
export default Ember.Component.extend({
actions: {
//...
restore(key){
this.set(`changeset.${key}`, this.get(`changeset._content.${key}`))
}
}
})
Transcript
In the last episode, we introduced ember-changeset which lets you change things in a form without it immediately updating everywhere else in the app. But then of course once you hit ‘Save’, it’ll then propagate to the rest of the app like you would expect. Aside from that core basic usage, there are lots of other properties and methods that are available to us. Today we are going to explore the implications of just one of those properties, the changes property.
The changes property, it returns an array of objects, and those objects have a key property and a value property. The easiest way to use it is what they list here in the documentation. So we’ll go ahead and paste that in here, and then we’ll be able to see when we edit the monster and we make changes, it’ll give us the thing that we’re changing and what we’re changing it to. So this is already pretty cool. We’re going to be able to see what properties we’re making changes to when we hit ‘Save’. But we can make it even better.
Let’s go ahead and log out the changeset property. And so here’s our changeset property, and it’ll be updating as we add new things. So we can see that we have _changes, and here we have what we’re listing out here. We also have _content which contains an internal object. So if we can access that _content, we can get what it was before. Let me show you what we can do with this. So we can get changeset._content and we’re going to get the current key from it. So this will take this _content object and get the previous value of that key. So now this is telling us something that’s way more useful. It’s telling us that the name is going from Spark to Sparkachu. There is one thing to note about how this works though. If we go back to Spark, then it’ll still say that the name has been changed from Spark to Spark. It doesn’t quite recognize that they are the same thing.
But enough with caveats. Let’s go on to more opportunities. One thing we could do is put a button here that will restore, not everything, but just this one property. So we’re going to call the restore action when we hit this button and feed it the key. The restore action will be setting the changeset property that goes with that key and replacing it with that same property but from the _content, which is what it was before. So we can see this in action. We can change this and we’ll go ahead and change another one. We’ll hit ‘Restore’ on one, and it’ll restore that particular one. And then when we hit ‘Save’, it’ll save the one that was not restored.
So that’s pretty cool. And there are even more things you could do with this. If you wanted to coordinate with the server, you could take this list of changes, and you could save it so you could have a list of every change that has ever been made to this model, so you would essentially have a history, a history that you could go back in time and rewind.
So those are the implications of the changes property, and as you can see there are a lot more properties and methods in ember-changeset. So we’re going to go over one more of those, isDirty, in the next episode and then move on to ember-changeset-validations.