Can anyone tell me how I could import an element depending on the value of a Polymer attribute? I thought I could use data binding but... It's not working. Is it possible to import an element dynamically?
code exemple here:
<link rel="import" href="app-window/{{name}}-app.html">
//This was my first idea (obviously doesn't work)
<polymer-element name="window-base" attributes="name" >
<template>
<link rel="stylesheet" href="window-base.css">
<section id="app">
<!--here will go the instance-->
</section>
</template>
<script>
Polymer('window-base', {
name: "Finder",
ready: function () {
this.instanceApp();
},
instanceApp: function () {
//this depends on the import made
var app=document.createElement(this.name + "-app");
this.$.app.appendChild(app);
}
});
</script>
</polymer-element>
Thanks!
Can anyone tell me how I could import an element depending on the value of a Polymer attribute? I thought I could use data binding but... It's not working. Is it possible to import an element dynamically?
code exemple here:
<link rel="import" href="app-window/{{name}}-app.html">
//This was my first idea (obviously doesn't work)
<polymer-element name="window-base" attributes="name" >
<template>
<link rel="stylesheet" href="window-base.css">
<section id="app">
<!--here will go the instance-->
</section>
</template>
<script>
Polymer('window-base', {
name: "Finder",
ready: function () {
this.instanceApp();
},
instanceApp: function () {
//this depends on the import made
var app=document.createElement(this.name + "-app");
this.$.app.appendChild(app);
}
});
</script>
</polymer-element>
Thanks!
Share Improve this question asked May 14, 2014 at 19:28 iroyoiroyo 7637 silver badges25 bronze badges 1- Hi, did you manage to build an element that could get an attribute as another element thanks to these answers? – Igor L. Commented Feb 10, 2015 at 15:10
4 Answers
Reset to default 9according to the Polymer 1.0 migration guide:
The global Polymer.import function is replaced by importHref. The new method can be invoked from an element as this.importHref. Outside an element, it can be called as as Polymer.Base.importHref.
So...
this.importHref(["yourComponent.html"], function() {})
This is the method I use for dynamically importing elements. I use vulcanizer to split up my elements into logical modules. Then I use Polymer.import:
Polymer 0.5
Polymer.import( ['/elements/'+this.module+'-module.html'], function() {
console.log('/elements/'+this.module+'-module.html loaded');
this.onComplete();
}.bind(this));
Update Polymer 1.0
Just use the link[rel="import"] tag
var link = document.createElement('link');
link.setAttribute('rel', 'import');
link.setAttribute('href', 'elements/app-module.html');
document.body.appendChild(link)
What about something like this? I haven't tested some of this (the WebComponentsReady event may only fire on window), but if you can post a jsbin or codepin that would help:
Polymer('window-base', {
name: 'Finder',
domReady: function() {
this.nameChanged();
},
nameChanged: function() {
var importElem = document.createElement('link');
importElem.rel = 'import';
importElem.href = 'app-window/' + name + '-app.html';
importElem.addEventListener('WebComponentsReady', function() {
var app = document.createElement(this.name + "-app");
this.$.app.appendChild(app);
}.bind(this));
this.appendChild(importElem);
}
});
The accepted solution also works for Polymer 2
Link to Polymer 2 importHref docs
Polymer.importHref([`bower_ponents/${plugin}/${plugin}.html`], () => {
//on load
}