Data binding in nested custom polymer elements (recursive data-binding)

Question

I try to bind custom sub elements to values of local storage by using polymer's template repeat functionality like this:

<polymer-element name="aw-outerElement">
<template>
    <template repeat="{{group in grouplist}}">
        <aw-innerElement groupId="{{group.groupId}}" name="{{group.name}}" val="{{group.val}}"></aw-innerElement>
    </template>
</template>
<script>
Polymer('aw-outerElement', {
ready : function () {
    // Binding the project to the data-fields
    this.prj = au.app.prj;
    this.grouplist =  [ 
                    { groupId: 100, name: 'GroupName1', val: this.prj.ke.groupVal100},
                    { groupId: 200, name: 'GroupName2', val: this.prj.ke.groupVal200}

    ];
}
</script>

In the code above I try to pass the data binding this.prj.ke.groupVal100 and this.prj.ke.groupVal200 to my inner element aw-innerElement through the attribute val. The aw-innerElement is a custom paper-input element where the value attribute should be set to e.g. this.prj.ke.groupVal100. It seems that only the stored initial value 0 will be set and NOT the data-binding string this.prj.ke.groupVal100 inside the value attribute. Is there a way to make a data-binding with template repeat inside inner elements?

My inner elements looks like this:

<polymer-element name="aw-innerElement" attributes="groupId name val">
<template>
    <paper-input type="number" floatingLabel label="{{groupId}} {{name}}" value="{{val}}" error="{{i18nnrerror}}"></paper-input>
</template>
<script>
Polymer('aw-innerElement', {
publish: {
     groupId: 0,
     name: '',
     val: 0
},

ready : function () {
    // Binding the project to the data-fields
    this.prj = au.app.prj;
    ...

}
</script>

As you can see above the value="{{val}}" of my innerElement should be set to this.prj.ke.groupVal100 and this.prj.ke.groupVal200.

Thanks in advance!

score 1 · Answer 1 · edited Dec 19 '15 at 18:28

I know I'm digging up an old question, but for future searchers this might come in handy. Polymer does not allow a variable as your key, so you need to pull it through a function like so:

...
<template is="dom-repeat" items="{{users}}">
  <li>{{showValue(item)}}</li>
</template>
...

<script>
  Polymer('aw-outerElement', {
    // Standard Polymer code here
    showValue: function(item){
      return item[myVar];
    }
  });
</script>

You can then manipulate as much as you want in Javascript and return the output for that one item in items.

score 0 · Answer 2 · edited Dec 19 '15 at 18:28

I'm new with polymer so maybe my answer is not correct. But I done something like this that you're trying to do.

here is a sample of my code

I guess that your problem is that you didn't use bind on your template

<template bind="{{grouplist}}">
    <template repeat="{{group in grouplist}}">
    </template>
</template>


<script>
Polymer('aw-outerElement', {
ready : function () {
    // Binding the project to the data-fields
    this.prj = au.app.prj;
    this.grouplist =  [ 
                    { groupId: 100, name: 'GroupName1', val: this.prj.ke.groupVal100},
                    { groupId: 200, name: 'GroupName2', val: this.prj.ke.groupVal200}
    ];
}
</script>

score 0 · Answer 3 · answered Aug 21 '14 at 03:09

Passing in a value seems to work fine for me in this example: http://jsbin.com/kalih/4/edit

<polymer-element name="x-bar">
  <template>
    <paper-input id="input"
                 label="{{name}}"
                 value="{{val}}">
    </paper-input>
    <button on-tap="{{logVal}}">Log val</button>
  </template>
  <script>
    Polymer('x-bar', {
      publish: {
        val: 0
      },
      logVal: function() {
        console.log(this.$.input.value);
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-foo">
  <template>
    <template repeat="{{item in items}}">
      <x-bar name="{{item.name}}" val="{{item.val}}"></x-bar>
    </template>
  </template>
  <script>
    Polymer('x-foo', {
      ready: function() {
        this.items = [
          {
            name: 'baz',
            val: 28
          },
          {
            name: 'qux',
            val: 42
          }
        ];
      }
    });
  </script>
</polymer-element>  

<x-foo></x-foo>

Btw, your aw-innerElement doesn't need to have an attributes attribute because you're using the publish object (they serve the same purpose, but publish lets you set default values, which you've done). Also, we recommend that you don't camel-case your element names, the HTML parser is actually going to lowercase them all anyway.

Hi Rob. In your example above you are using a discrete value *val*, e.g. 28! My problem here is that I **DON'T** want to bind a discrete value to my `aw-innerelement` value attribute but I want to do a **variable** data-binding. What I mean is that the `value` attribute of my `aw-innerelement` should be bind to `this.prj.ke.kg100` and should look like this: . My `groupList` does have 7 groups with 10 sub-groups. My interest is to **NOT** duplicate each `aw-innerelement` according to the account of groups in my groupList. — DoK, Aug 21 '14 at 10:30
What is the value for `this.prj.ke.groupVal100` in your project? — robdodson, Aug 25 '14 at 23:13
It's a value stored in local storage of the browser and changable elsewere in my project — DoK, Aug 27 '14 at 08:22

Data binding in nested custom polymer elements (recursive data-binding)

3 Answers3