one-way binding input values

[Michael Giuffrida]

I'm having another philosophical breakdown over data binding.

Suppose you one-way bind to a paper-input's value. You register a listener so you know when the user changes the value:

<paper-input value="[[value]]" on-change="onChange">

The onChange function calls server-side validation, which responds with min(value, 20), and sets this.value to that response. If the <paper-input> is set to 21, this.value will be set to 20, which will propagate to the <paper-input>, keeping it at 20.

But if the <paper-input> is set to 21 again, this.value is already 20. So onChange is a no-op, and the <paper-input> doesn't change -- it's still 21. Even calling this.notifyPath doesn't help because of dirty checking.

Example: http://jsfiddle.net/pqa7dywt/2/

I would use two-way data binding, but because onChange actually has to happen asynchronously (e.g. AJAX), it would cause an infinite loop when the value changes twice in between responses.

Is there some Polymery way to force-update bindings?

[mich...@chromium.org]

I said we can't use two-way binding with asynchronous callbacks because that can cause infinite loops, but I think I found a way around that: Cache the value when you call the validator. If the response that comes back is associated with a stale value, you can ignore it.

http://jsfiddle.net/g5q4catj/

This also makes it possible to drop the on-change event, using a property observer instead, but to avoid unnecessary work we'll have to suppress recursion: http://jsfiddle.net/308a4j7s/

I guess that probably answers my own question, unless there's a better way to accomplish this.