Object references in Polymer repeat statements

[Junius Gunaratne]

 I can't seem to put a JS object reference as an attribute in a template repeat statement. Anyone have an idea why this doesn't work?

This works:

<polymer-custom-parent>

<template repeat="{{item in items}}">

<polymer-custom-item item="randomstring">

    {{item.title}}

</polymer-custom-item>

</template>

</polymer-custom-parent>

This does not:

<polymer-custom-parent>

<template repeat="{{item in items}}">

<polymer-custom-item item="{{item}}">

    {{item.title}}

</polymer-custom-item>

</template>

</polymer-custom-parent>

Console error:

Exception caught during observer callback: TypeError: Cannot read property 'length' of undefined at Element.bind (http://localhost:8888/bower_components/platform/platform.js:33:5389)

[Fernando Hurtado]

I had the same issue beginning this week, fiexed with some IFs:

<polymer-custom-parent>

<template if="{{ items }}">

  <template repeat="{{item in items}}">

  <polymer-custom-item item="{{item}}">

      {{item.title}}

  </polymer-custom-item>

  </template>

</template>

</polymer-custom-parent>

Hope that helps

Héctor Fernando

[Rafael Weinstein]

Can one of you guys post a jsbin (or similar) which shows the error? Sounds like a bug.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Fernando Hurtado]

Hi Rafael, I tried to documented what happened on my case here: https://groups.google.com/forum/?fromgroups=#!topic/polymer-dev/zpC1xQ-WfMs

Thanks 

Héctor Fernando

[Eric Bidelman]

This repos the issue Raf: http://jsbin.com/UGEHuxO/2/edit

It looks like this was fixed 3 days ago in https://github.com/Polymer/polymer-expressions/commit/db4a0552774f844ded8e01dc0ab04c2092716fa1?

which means the next release should unbreak this :)

[Rafael Weinstein]

I was thinking it was probably that (as Dan also speculated). Eric, thanks for verifying. Guys, sorry for the breakage.

[Junius Gunaratne]

I updated to the latest Polymer 0.1.3 and also applied Héctor's advice of using an if statement to check for a null object. However, I'm still having data binding issues when using a repeat statement. Polymer still doesn't seem to like me referring to a JS object as an attribute in a repeat statement with a custom element. Am I doing something wrong, or is this a bug? If this is a bug are there work arounds in the interim?

This works:

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

<polymer-element name="polymer-list">

  <template if="{{ items }}">

    <template repeat="{{ item in items }}">

      <polymer-custom-elem>{{item}}</polymer-custom-elem>

    </template>

  </template>

<script>

  (function() {

    Polymer('polymer-list', {

      ready: function() { 

        this.super();

        this.items = [1,2,3];

      }

    });

  })();

</script>

</polymer-element>

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

<polymer-element name="polymer-custom-elem" attributes="item">

<template>

  <content></content>

</template>

<script>

  (function() {

    Polymer('polymer-custom-elem', {

      item : '',

      ready: function() { 

        this.super();

      },

    });

  })();

</script>

</polymer-element>

Creating an attribute that invokes data binding doesn't work:

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

<polymer-element name="polymer-list">

  <template if="{{ items }}">

    <template repeat="{{ item in items }}">

      <polymer-custom-elem item="{{item}}"></polymer-custom-elem>

    </template>

  </template>

<script>

  (function() {

    Polymer('polymer-list', {

      ready: function() { 

        this.super();

        this.items = [1,2,3];

      }

    });

  })();

</script>

</polymer-element>

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

<polymer-element name="polymer-custom-elem" attributes="item">

<template>

  {{item}}

  <content></content>

</template>

<script>

  (function() {

    Polymer('polymer-custom-elem', {

      item : '',

      ready: function() { 

        this.super();

      },

    });

  })();

</script>

</polymer-element>

Error:

1. Exception caught during observer callback: TypeError: Cannot read property 'length' of undefined at d.Element.bind (http://localhost:8888/bower_components/platform/platform.js:33:8289) at d.e [as super] (http://localhost:8888/bower_components/polymer/polymer.js:29:19142) at d.Polymer.ready (http://localhost:8888/polymer/elements/polymer-custom-elem/polymer-custom-elem.html/polymer-custom-elem.js:5:19) at d.e.prepareElement (http://localhost:8888/bower_components/polymer/polymer.js:29:9780) at d.i.bind (http://localhost:8888/bower_components/polymer/polymer.js:29:8315) at d.a.(anonymous function) [as bind] (http://localhost:8888/bower_components/polymer/polymer.js:29:19197) at w (http://localhost:8888/bower_components/platform/platform.js:33:13704) at A (http://localhost:8888/bower_components/platform/platform.js:33:14617) at d.k.createInstance (http://localhost:8888/bower_components/platform/platform.js:33:17581) at Object.<anonymous> (http://localhost:8888/bower_components/platform/platform.js:33:21750) observe.js:609

[Eric Bidelman]

You can ditch the null check on the outside <template> in polymer-list. The first <template> in an element is what Polymer generates shadow DOM from. You can also ditch the calls to this.super() since you're not inheriting from other elements.

Updated demo that works: http://jsbin.com/oqotUdE/1/edit

[Daniel Freedman]

It seems that the ready function in polymer-custom-elem is to blame. Removing the "this.super" call makes your example work just fine.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCAPUj%2BJNwLEkP51Bf1edOYHOaA9abfTsfRNGPJKEotELw%40mail.gmail.com.

[Yvonne Yip]

It seems like there's a bug with "super" when the element is created by a <template repeat>. bug: https://github.com/Polymer/polymer/issues/397

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAAUAVAh84xhj_JtJimB3-ayRWXRCAcewi7aOEVKzisNvpf6ORw%40mail.gmail.com.