javascript - Rendering dynamic Enyo Repeaters -

i need make data table enyo project working on display result of ajax call. this (blatantly stolen ryanjduffy here)seems starting point, when try call setdata() button event (rather in constructor) have here following error:

invalidcharactererror: string contains invalid character @ http://enyojs.com/enyo-2.1/enyo/source/dom/control.js:681 

i looked @ control.js code , seems tries create new node, this.tag property set null , things break.

i feel missing simple, can't see problem yet...

can tell me doing wrong?

thanks!

edit 1:

apparently calling render() not needed. here original working version render() commented out. looks great. however, if try remove render() version requires button click, repeater starts creating div's above table instead of tr td's inside table...

edit 2:

basically, can tell, repeater inside of table lose it's parent once table rendered (or that). result repeater start rendering new items outside of original table , because td tag without table makes no sense, renders div. solution have come give repeater table tag children wind in right spot. adds challenge of needing recreate header line each time, not big of deal. i have working example if interested.

i'm sure you're not looking solution longer since mentioned in post, thought i'd let know figured out. in short, code shouldn't have worked since browsers forgiving, did ... sort of.

when code run @ create time, renders this:

<table>   <tr> <!-- header row --> </tr>   <div> <!-- repeater tag -->      <tr> <!-- repeater row --> </tr>   </div> </table> 

the browser looks @ , says, "hey, dummy! no <div>s in <table>" , kicks out leaves <tr>s.

in example, since you're delaying render of rows, enyo renders:

<table>   <tr> <!-- header row --> </tr>   <div></div> </table> 

and browser ejects <div> , you're left empty table. when later set data, rows rendered div. unfortunately, since you're rendering <tr> , <td>, aren't valid outside table text.

i found couple solutions. simplest set tag of repeater tbody allowed inside table. more involved solution make datatable inherit repeater , set header row chrome they're not removed when updating data.

option #2 fiddle

enyo.kind({     name:"datatable",     tag: "table",     kind: "repeater",     published:{         map:0,         data:0     },     handlers: {         onsetupitem: "setupitem"     },     components:[         {name:"row", kind:"datarow"}     ],     create:function() {         this.inherited(arguments);         this.mapchanged = this.datachanged = enyo.bind(this, "refresh");          this.refresh();     },     refresh:function() {         if(this.map && this.data) {             this.buildheader();             this.setcount(this.data.length);         }     },     buildheader:function() {         if(this.$.header) {             this.$.header.destroyclientcontrols();         } else {             this.createcomponent({name:"header", tag:"tr", ischrome: true});         }          for(var i=0;i<this.map.length;i++) {             this.$.header.createcomponent({content:this.map[i].header, tag:"th"});         }          this.$.header.render();     },     setupitem:function(source, event) {         for(var i=0;i<this.map.length;i++) {             event.item.$.row.createcomponent({content:this.data[event.index][this.map[i].field]});         }          event.item.render();          return true;     } });