dynamic - Polymer. It is possible to render element in {{}}? -

dynamic - Polymer. It is possible to render element in {{}}? -

in json have metadata of field's type of command (textbox, textarea, combobox, email, date, address etc).

{ "metadata": "fields": [ { "fieldname": "id", "title": "uniq id", "clientvaluetype":"int", "clientcontrolttype":"textbox", "clientinputwidth":"9" }, { "fieldname": "name_full", "title": "org total name", "clientvaluetype":"string", "clientcontroltype":"textarea", "clientinputwidth":"100" }, { "fieldname": "name_full", "title": "org total name", "clientvaluetype":"string", "clientcontroltype":"textarea", "clientinputwidth":"100" } ] },"data":[ {id:1, name_full:"org1"}, {id:2, name_full:"org2"}] }

let's controls in different files each edit type: textbox.html, textarea.html, combobox.html etc.

textbox.html example

<polymer-element name="text-box" noscript> <template> here textbox </template> </polymer-element>

i need dynamically import these elements render dynamic edit form based on field.clientcontroltype value

<polymer-element name="rawc-detail" attributes="data"> <template> <div class="panel panel-default"> <div class="panel-body"> <form class="form-horizontal" role="form"> <template id="fields" repeat="{{val in fields}}"> <div class="form-group"> <label for="val.name" class="col-sm-2 control-label">{{val.title}}</label> <div class="col-sm-10">{{val.element}}</div> </div> </template> </form> </div> </div> <style> </style> </template> <script> polymer({ data:{}, ready: function() { this.fields = []; }, datachanged: function(oldvalue, newvalue) { this.bindnewdata(); }, bindnewdata: function() { console.log(this.data); var t = document.queryselector('rawc-detail::shadow #fields'); if (t) { var model = { fields: [] }; (var i=0; i<this.data.metadata.fields.length; i++) { var field = this.data.metadata.fields[i]; //console.log(field); if (field.clientcontroltype == "textbox") { var link = document.createelement('link'); link.href='http://localhost/testdatafile?shema=polymer_parts&name=textbox.html'; this.parentnode.appendchild(link); //this.ownerdocument // polymer.import(['http://localhost/testdatafile?shema=polymer_parts&name=textbox.html'], function() { var name = 'el-'+field.fieldname; console.log(name); var textbox = document.createelement(name, 'rawc-textbox'); console.log(textbox); //t.appendchild(textbox); field.element = textbox; model.fields.push(field); // var tt = document.queryselector('rawc-detail::shadow '+name); // console.log('tt=', tt); // tt.description = 'a dynamic import'; // }); } // console.log(field); } t.model = model; } } });

is possible?

detail.html

<polymer-element name="rawc-detail" attributes="data"> <template> <apply-author-styles></apply-author-styles> <h3 title="{{data.metadata.descone}}" class="text-center">{{data.metadata.titleone}}</h3> <div class="panel panel-default"> <div class="panel-body"> <form class="form-horizontal" role="form"> <div id="forminner"> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="button" class="btn btn-primary" on-tap="clickok()">Ок</button> <button type="button" class="btn btn-primary" on-tap="clickcancel()">Отмена</button> </div> </div> </form> </div> </div> <style> </style> </template> <script> polymer({ data:{}, ready: function() { this.fields = []; }, datachanged: function(oldvalue, newvalue) { this.bindnewdata(); }, inarray: function(val, arr) { for(var i=0; i<arr.length; i++) if (arr[i] == val) homecoming true; homecoming false; }, bindnewdata: function() { var t = document.queryselector('rawc-detail::shadow #forminner'); var elementurls = []; (var i=0; i<this.data.metadata.fields.length; i++) { var field = this.data.metadata.fields[i]; var el = null; var name = 'el-'+field.fieldname; if (field.clientcontroltype === "textbox") { el = document.createelement('rawc-textbox'); el.id = name; el.data = this.data.content[0].data[field.fieldname]; url = 'http://localhost/testdatafile?shema=polymer_parts&name=textbox.html'; if (!this.inarray(url, elementurls)) elementurls.push(url); } var div=document.createelement('div'); div.classname="form-group"; var label = document.createelement('label'); label.id = name; label.classname = "col-sm-2 control-label"; label.for = field.name; label.innerhtml = field.title; div.appendchild(label); if (el != null) div.appendchild(el); t.appendchild(div); } for(var i=0; i<elementurls.length; i++) polymer.import([elementurls[i]]); } }); </script> </polymer-element>

textbox.html

<polymer-element name="rawc-textbox" attributes="data"> <template id="textbox"> <input type="text" value="{{data}}"> <button on-click="{{clickme}}">go</button> </template> <script> polymer( { clickme:function(e,p,o){ console.log(this.data); } }); </script> </polymer-element>

dynamic import polymer elements