No documentation explaining two-way data binding inside dom-repeat

[mgiuffrida]

I haven't found documentation explaining the difference between one-way and two-way binding in dom-repeat. Specifically, I'm trying to understand why this does not work (real example here):

<dom-module id="x-foo"><template>
  <template is="dom-repeat" items="[[items]]><!-- one-way binding of items -->
    <paper-checkbox checked="{{item.checked}}"></paper-checkbox>
  </template>
  <paper-toggle-button checked="{{items.0.checked}}"></paper-toggle-button>
</template></dom-module>

Changing the paper-checkbox doesn't affect the paper-toggle-button. If items="{{items}}" is two-way bound instead, it works.

I gather the rule is "two-way data binding to item inside dom-repeat only works if items is also two-way bound" but I'm not sure.

[PSVapour]

Hi,

I ran into the same problem myself. I managed a work around by adding on-checkbox-change...

<paper-checkbox on-checked-changed="foo" checked="{{item.checked}}"></paper-checkbox>

foo: function(e){
       //do something with e 
},

Hope this works for you.

Edit: Spelling...

[arthurevans]

@mgiuffrida Thanks. We should get an update into the docs on this.

In this case, you're right that using the one-way binding on items means that x-foo won't listen for change notifications about items, so those changes won't show up. Which is exactly what I'd expect a one-way binding to do here. But because dom-repeat is kind of a special star, it wouldn't hurt to clarify that in the docs.

[arthurevans]

This is not related to #2228.

This is a confusion over the way changes propagate through a dom-repeat.

I added this text a while back:

"Notifications for changes to item sub-properties are forwarded to the template instances, which update using the normal change notification events. If the items array is bound using two-way binding delimiters, changes to individual items can also flow upward."

Which sort of answers this issue, but it could really be clearer.

i.e., given:

<template is="dom-repeat" items="{{myItems}}">
  <input value="{{item.name::input}}>
</template>`

Changing the input value for an item causes an observable change to the myItems array. Whereas:

<template is="dom-repeat" items="[[myItems]]">
  <input value="{{item.name::input}}>
</template>`

Does not. If the parent has an observer for example:

observers: [ 
  '_myItemsChanged(myItems.*)'
]

In the first example, the observer will fire when the user edits the value in an <input>. In the second example, it will not.

This could probably be clearer in the docs. But it would probably need to be in a new subsection because the current section is already pretty long and littered with marginalia.