search

tomalec / sortable-flexbox-list

Custom Element with sortable list, that uses CSS flexbox
8 stars 3 forks source link

Two-way binding for sortable's order #1

Closed tomalec closed 10 years ago

tomalec commented 10 years ago

If you add template binding to list elements

<li style="order: {{userOrder$}};"><input value="{{userOrder$}}"/></li>

Order change made by <tomalec-sortable-list> is not reflected in userOrder$ (the other way works fine).

warpech commented 10 years ago

It appears that once you set style via JavaScript (currentItem.style.order++), you lose the binding because your DOM template style="order: {{userOrder$}}" is replaced with static new value (e.g. style="order: 2")

It is easy to isolate this issue in a more understantable way: http://jsfiddle.net/warpech/qP96s/

Way you use the range slider, both DIV style and DIV text content is updated because of the two way data binding.

But when you use the button, only DIV style is replaced.

//edit: Another example of similar problem with inline style: http://jsfiddle.net/warpech/4ne3J/

When you apply a color and then resize the text, the color is lost.

tomalec commented 10 years ago

It seems it's not related to node's style, but to any attribute other than value: http://jsfiddle.net/tomalec/b5HWH/1/

tomalec commented 10 years ago

As described at https://groups.google.com/forum/#!msg/polymer-dev/N5Xq4zAN8Wk/5mL8dF-JXEEJ we should wait for <polymer-element> to be registered (polymer-ready), to use its two-way binding.