聚合物元素未从字符串/文本中注册到聚合物中

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 有人可以帮助我说明在此示例中我做错了什么-http://jsbin.com/bekoxo/2/edit?html，输出#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 Chrome浏览器的屏幕截图位于-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 我可以发现元素（appler-page）未成功注册，模板显示文档碎片，而不是所需的影子根

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) （通过javascript创建一个元素并立即使用它）

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 编辑-解决该问题的更好的jsbin

http://jsbin.com/bekoxo/2/edit?html,output#H:L23 http://jsbin.com/bekoxo/2/edit?html,output#H:L23

Answer 1

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>

See http://jsbin.com/qifupa/edit 见http://jsbin.com/qifupa/edit

Answer 2

Another instance of staying up with the latest Polymer version I found. 紧跟我发现的最新Polymer版本的另一个实例。

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. 我为导入导入切换到Polymer-project.org地址，并且可以正常工作。

http://jsbin.com/bekoxo/14/edit?html,output#H:L23 http://jsbin.com/bekoxo/14/edit?html,output#H:L23

聚合物元素未从字符串/文本中注册到聚合物中

问题描述

2 个解决方案

解决方案1
1 2014-10-13 11:01:43

解决方案2
0 已采纳 2014-10-14 20:32:11

聚合物元素未从字符串/文本中注册到聚合物中

问题描述

2 个解决方案

解决方案1 1 2014-10-13 11:01:43

解决方案2 0 已采纳 2014-10-14 20:32:11

解决方案1
1 2014-10-13 11:01:43

解决方案2
0 已采纳 2014-10-14 20:32:11