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

Question

In json i have metadata of field's type of control (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 full name",
"ClientValueType":"string",
"ClientControlType":"textarea",
"ClientInputWidth":"100"
},
{
"Fieldname": "name_full",
"Title": "org full name",
"ClientValueType":"string",
"ClientControlType":"textarea",
"ClientInputWidth":"100"
}
]
},"Data":[ {id:1, name_full:"org1"}, {id:2, name_full:"org2"}]
}
Let's this controls in different files for each edit type: textbox.html, textarea.html, combobox.html etc.
Textbox.html for example
<polymer-element name="text-box" noscript>
<template>
here is textbox
</template>
</polymer-element>
I need to dynamically import these elements to 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: []
};
for (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 this possible?

Answer 1

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)
return true;
return false;
},
bindNewData: function() {
var t = document.querySelector('rawc-detail::shadow #forminner');
var elementUrls = [];
for (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>