Disable bindings until object is saved

1

Hi - I think this is a simple task, but I haven’t found a simple solution.

I have a row of objects. You can edit an individual object and the bindings show you real time updating. That’s cool - however, what if I DON’T want to show the updates until the user Saves the object?

I’ve seen stuff from googling on BufferedProxy but that seems like a TON of work just to hide the state change until it’s committed.

I also thought about trying to duplicate/copy the object, modify it, then save it overtop of the original object.

I’d like to know what others would suggest in trying to disable the auto-binding UI.

Thx!

3 Likes
2

Something like this?

I used isDirty, but of course you could use any flag you wanted. isDirty just happens to be right for my simple example.

1 Like
3

Thanks tristanpendergr - that would require creating new properties for each of the Object/Model properties. I was hoping for a non-duplicating way to solve this issue.

4

I use buffered-proxy for this, you create a buffer in your controller and then tell it when to update the bindings (or roll them back)

https://github.com/movableink/buffered-proxy/blob/master/README.md

1 Like
5

Thanks opsb - so, you’re using bufferedContent in your templates? Do you have a jsbin or sample code that I could take a look at?

6

Here’s an example with a component, https://github.com/movableink/buffered-proxy/issues/4

You can do exactly the same thing in a controller as well. All you have to do in your template is prefix the binding with buffer e.g. {{buffer.someBufferedComponentParam}}

7

Just wanted to say this is a great question. People get so caught up in the magic of data binding, that they totally miss the fact that it can result in some truly crap UX: one being adding non-persisted items to a collection, the other being showing a collection item in mid edit before anything has been saved. I think its the result of over-simplified example “apps” like TODO MVC. Starred for interest.

2 Likes
8

Buffered Proxy pattern is one we started to adopt as well within our app. And I agree with @uberllama it’s often overlooked and attempts to skirt around the issue typically results in some ugly hacks. BufferedProxy is by far the more elegant solution available.

2 Likes
9

For colletions you can use a filter like this

persistedContent: function(){
	return this.get('arrangedContent').filter(function(item) {
		return !item.get('isNew');
	});
}.property('content', 'content.@each', 'content.@each.isNew')
10

The Buffered Proxy hides the changes until you save. But then as soon as the save starts the UI reacts to the now changed model, and you have to resort to the ugly filter hacks you are doing.

What would be ideal, is if there was a way to use the BufferedProxy, then take the buffered changes, and apply those ( serialize that and send it to server ) and then AND ONLY when the save promise returns , so apply those changes to the model. This is what the original question asked as well. So far, I have not seen anything that does that. But I am going to work on it.