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
.