CODEWITHSUNDEEP
dartdart-polymer
timecc
timecc

Reputation: 161

Nested Polymer Custom Components Data Binding

I cannot get data to round trip from a child component to the parent component and back to a child component.

I have made a simple nested component testbed. Here is the child:

<link rel="import" href="../packages/polymer/polymer.html">

<polymer-element name="child-comp" attributes="x y">
  <template>
    <input type='text' value='{{x}}'/>
    <p>-x={{x}}-</p>
    <p>list:
      <template repeat='{{y}}'>-{{ }}-</template>
    </p>
  </template>

  <script type='application/dart'>
    import 'package:polymer/polymer.dart';

    @CustomTag('child-comp')
    class ChildComp extends PolymerElement {
      @observable var x;
      @observable var y;

      ChildComp.created() : super.created();
      }
  </script>
</polymer-element>

It takes a text input (x) and echoes it out (the p immediately after the input). It also send x back to the parent control where it is added to a list (y) that should then be iterated through in the child.

Here is the parent component:

<link rel="import" href="../packages/polymer/polymer.html">
<link rel="import" href="../components/child_comp.html">

<polymer-element name="top-comp">
  <template>
    <child-comp x='{{s}}' y='{{t}}'></child-comp>
  </template>

  <script type='application/dart'>
    import 'package:polymer/polymer.dart';

    @CustomTag('top-comp')
    class TopComp extends PolymerElement {
      @observable String        s = '1234';
      @observable List<String>  t = ['A', 'B', 'C'];

      TopComp.created() : super.created();

      sChanged(oldVal, newVal) {
        t.add(newVal);
        }
      }

  </script>
</polymer-element>

From the child to the parent works and the change is correctly added to the List. But the List does not seem to get to the child - the DOM is never updated.

I have tried every possible combination of the decorators, but perhaps the answer is in a variant of the bind= syntax..

A side note: is there authoritative updated documentation on the decorators? Searching turns up a bunch of references of varying antiquity.

Upvotes: 1

Views: 243

Answers (1)

montyr75
montyr75

Reputation: 941

If I understand your problem correctly, you need to make sure that not only is your List observable, but also its elements. You can do so like this:

@observable List<String>  t = toObservable(['A', 'B', 'C']);

This way, changes to t's elements (instead of just t itself) are "announced", and the DOM can update accordingly.

Upvotes: 2

Related Questions