Polymer Element not registered in polymer from string/text
Question
Can someone help me with stating what am I doing wrong in this example -- http://jsbin.com/bekoxo/2/edit?html,output#H:L23
The screenshot for the chrome inspector is at - https://www.dropbox.com/s/t6uua7h714h2otg/Screenshot%202014-10-13%2001.32.54.png?dl=0
I can figure out that the element (appler-page) is not registered successfully, template shows document-fragment instead of desired shadow-root
the 2nd element, where polymer definition is part of the markup(same markup) is rendered successfully.
Can someone point out what am I missing in order to make the first part of example also work.
(which is creating an element via javascript and using it immediately)
EDIT --- problem code below
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>
<meta name="description" content="problem with dynamically building a polymer element" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var scr = '<polymer-element name="appler-page"><template>template content {{test}}</template><script>var proxymodel = {};proxymodel["test"] = "testfie" ;'+
'Polymer(proxymodel);<\/script><\/polymer-element><appler-page><\/appler-page>';
$(document).ready(function(){
document.getElementById("fie").onclick = function(){
var divel = document.createElement("div");
divel.innerHTML = scr;
document.querySelector(".polymerized").innerHTML = "";
document.querySelector(".polymerized").appendChild(divel);
}
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="button" id="fie" value="fie"/>
<div class="polymerized">before content</div>
EDIT -- A better jsbin for the problem
2 answers
solution1
1 2014-10-13 11:01:43
Here is one way in which you can register your element imperatively (which, I believe is what your first element is trying to do). I've simplified your example a bit.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import"
href="http://www.polymer-project.org/components/polymer/polymer.html">
<script>
Polymer('appler-page', {test: 'testfile'});
var el = document.createElement('div');
el.innerHTML = '\
<polymer-element name="appler-page">\
<template>template content {{test}}</template>\
</polymer-element>';
document.body.appendChild(el);
</script>
<appler-page></appler-page>
</body>
</html>
solution2
0 ACCPTED 2014-10-14 20:32:11
Another instance of staying up with the latest Polymer version I found.
here's the working piece of code that may help anyone else if they are attempting the same thing.
I switched to Polymer-project.org addresses for the imports and it worked.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.