It seems that the ready function in polymer-custom-elem is to blame. Removing the "this.super" call makes your example work just fine.
On Fri, Jan 17, 2014 at 11:57 AM, Eric Bidelman <[email protected]> wrote: > 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 > > > On Fri, Jan 17, 2014 at 8:25 AM, Junius Gunaratne <[email protected]>wrote: > >> 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<http://localhost:8888/bower_components/platform/platform.js>) >> at d.e [as super] ( >> >> http://localhost:8888/bower_components/polymer/polymer.js:29:19142<http://localhost:8888/bower_components/polymer/polymer.js>) >> at d.Polymer.ready ( >> >> http://localhost:8888/polymer/elements/polymer-custom-elem/polymer-custom-elem.html/polymer-custom-elem.js:5:19<http://localhost:8888/polymer/elements/polymer-custom-elem/polymer-custom-elem.html/polymer-custom-elem.js>) >> at d.e.prepareElement ( >> >> http://localhost:8888/bower_components/polymer/polymer.js:29:9780<http://localhost:8888/bower_components/polymer/polymer.js>) >> at d.i.bind ( >> >> http://localhost:8888/bower_components/polymer/polymer.js:29:8315<http://localhost:8888/bower_components/polymer/polymer.js>) >> at d.a.(anonymous function) [as bind] ( >> >> http://localhost:8888/bower_components/polymer/polymer.js:29:19197<http://localhost:8888/bower_components/polymer/polymer.js>) >> at w ( >> >> http://localhost:8888/bower_components/platform/platform.js:33:13704<http://localhost:8888/bower_components/platform/platform.js>) >> at A ( >> >> http://localhost:8888/bower_components/platform/platform.js:33:14617<http://localhost:8888/bower_components/platform/platform.js>) >> at d.k.createInstance ( >> >> http://localhost:8888/bower_components/platform/platform.js:33:17581<http://localhost:8888/bower_components/platform/platform.js>) >> at Object.<anonymous> ( >> >> http://localhost:8888/bower_components/platform/platform.js:33:21750<http://localhost:8888/bower_components/platform/platform.js> >> ) >> observe.js:609<http://localhost:8888/bower_components/observe-js/src/observe.js> >> >> >> >> >> >> > 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 [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/CACGqRCAPUj%2BJNwLEkP51Bf1edOYHOaA9abfTsfRNGPJKEotELw%40mail.gmail.com > . > > For more options, visit https://groups.google.com/groups/opt_out. > 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAAUAVAh84xhj_JtJimB3-ayRWXRCAcewi7aOEVKzisNvpf6ORw%40mail.gmail.com. For more options, visit https://groups.google.com/groups/opt_out.
