dynamic html generation in polymer -

i trying generate div dynamically based on properties in fabric.canvas.object.

the following excerpts code.

class polymer2fabricedit extends polymer.element {   static is() { return 'polymer-2-fabric-edit' }   static config() {     return {       properties: {         canvas: {           type: object,           value: null         },         ctx: {           type: object,           value: null         },         canvaswidth: {           type: number,           value: 300         },         canvasheight: {           type: number,           value: 300         },         topproperty: {           type: number,           value: 0,           notify: true         },       observers: [        ]     }   }   constructor() {     super();     console.log('created');   }   connectedcallback() {     super.connectedcallback();     console.log('attached');   }   ready() {     super.ready();     this.canvas = new fabric.canvas(this.$.c, {isdrawingmode: false});     console.log(this.canvas);     this.ctx = this.canvas.getcontext('2d');     this.addeventlistener('click', (e)=>this.handleclick(e));     this.addeventlistener('change', (e)=>this.handlechange(e));     this.$.droptargetdiv.addeventlistener("dragover", (e)=>this.preventeventdefault(e));     this.$.droptargetdiv.addeventlistener("drop", (e)=>this.loadobject(e));     this.$.imageloader.addeventlistener("change", (e)=>this.readurl(e));     this.$.backgroundimageloader.addeventlistener("change", (e)=>this.readbackgroundurl(e));     this.$.textureimageloader.addeventlistener("change", (e)=>this.readtextureurl(e));     console.log('ready');   }    generateeditview(obj) {      console.log("generateeditview");     console.log(obj);     var html = "<br/><br/><b>edit properties</b><br/><br/>";     for(var key in obj) {       if(key === "stateproperties") {         console.log(key, obj[key]);         var o = obj[key];           for(var k in o) {             console.log(o[k], obj[o[k]]);             switch(o[k]) {             case 'top':                 console.log("setting top from:", this.topproperty);                 this.topproperty = obj[o[k]];                 html += '<input type="number" value="{{topproperty}}" min="0" max="150" id="topproperty">';                 html += '<input type="range" value="{{topproperty}}" min="0" max="150" id="toppropertyrange">';                 html += '<br/>';                 console.log("set to: " + this.topproperty);                 break;            case ‘…’:             break; default;     }     console.log("adding: " + html);     this.$.editview.innerhtml = html;   }     handleclick(e) {     console.log("hamdleclick: " + e.type);     console.log("click: " + e.currenttarget.tagname);     console.log(e);     var id = e.path[0].id;     console.log("id: " + id);     switch(id) {         case '':           console.log("no id - mostlike selet of object");           var target = e.target;           var obj = this.canvas.getactiveobject();           console.log("target:" + target);           console.log("selected object:" + obj);           console.log("selected menu: " + this.selectedmenu);           if(this.selectedmenu === "control") {             this.generateeditview(this.canvas.getactiveobject());           }           break;         break;         case 'topproperty':           console.log("change topproperty", this.$.topproperty);           this.topproperty = this.$.topproperty;           break;       default:     }   } 

this not work following runtime error polymer-2-edit.html:1979 specified value "{{topproperty}}" not valid number. value must match following regular expression: -?(\d+|\d+.\d+|.\d+)([ee][-+]?\d+)? appears generated code not pick binding.

if change code following div displayed properly. html += ''; html += ''

but undefined when reading this,$.topproperty or this.$.toppropertyrange have tried adding onchange=changeproperty(this) on latter 2 , changeproperty undefined message in debugger.

i suspect expecting function outside of polymer need inside polymer set objects properties.

is there example of adding dynamic input fields , processing changes made?

i still have not been successful in getting dynamic html generated code work. tried rewriting code using dom:if , did not work way wanted to.

that said have accomplished goal writing static code , using css hide unneeded selections , show sections need.

i added css class

.hide {     display: none;     visibility: hidden; } 

then created div each element , appended “edit” property name div id

<div id="topedit">     <label for="top">top:</label>     <input type="number" value="{{top::input}}" min="0" max="150" id="top">     <input type="range" value="{{top::input}}" min="0" max="150" id="toprange">     <br/> </div> <div id="leftedit">     <label for="left">left:</label>     <input type="number" value="{{left::input}}" min="0" max="150" id="left" onchange="{{change}}">     <input type="range" value="{{left::input}}" min="0" max="150" id="leftrange">     <br/> </div> <div id="widthedit">     <label for="width">width:</label>     <input type="number" value="{{width::input}}" min="0" max="150" id="width">     <input type="range" value="{{width::input}}" min="0" max="150" id="widtnrange">     <br/> </div> 

i use function hide elements id “edit”

clearview() {     // hide edit elements     var elements = this.$;     for(var key in elements) {         var element = elements[key];         var elementid = element.id;         if(!!elementid.match(/.*edit$/)) {             element.classlist.add('hide');         }     } } 

the original code looped thorough active object , removed css hide class appreciate elements. approach modified since of html elements chosen did not directly correspond objects element, , decided did not want provide fields every property. modified code based on selected object type utilize array of fields

when user clicks on object execute code similar following example.

this example text or itext objects.

var fields = [     "fontweight", //  normal, bold     "fontstyle", //  normal, italic, oblique, ''     "textdecoration", //  underline, linethrough, overline     "fontfamily",     "textalign",     "stroke",     "backgroundcolor",     "textbackgroundcolor",     "strokewidth",     "fontsize",     "lineheight",     "charspacing",     "shadow", //  shadowcolor, shadowblur, shadowoffsetx, shadowoffsety     "shadowcolor",     "shadowblur",     "shadowoffsetx",     "shadowoffsety",     "text",     "addtext" ]; 

the following code removes css hide class , displays appropriate elements.

for(var key in fields) {     var id = fields[key] + "edit";     var element = this.$[id];     if(element) {         element.classlist.remove('hide');     } } 

this approach works me , provides full 2 way binding selected elements.