javascript - polymer 元素未从字符串/文本注册到 polymer 中

标签 javascript html polymer web-component shadow-dom

有人可以帮助我说明我在这个例子中做错了什么--http://jsbin.com/bekoxo/2/edit?html,output#H:L23

Chrome 检查器的屏幕截图位于 - https://www.dropbox.com/s/t6uua7h714h2otg/Screenshot%202014-10-13%2001.32.54.png?dl=0

我可以发现元素(appler-page)未注册成功,模板显示文档片段而不是所需的影子根

第二个元素(其中 polymer 定义是标记的一部分(相同标记))已成功呈现。

有人可以指出我缺少什么以使示例的第一部分也起作用。

(通过 javascript 创建一个元素并立即使用它)

编辑 --- 下面的问题代码

<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>

编辑——一个更好的 jsbin 来解决这个问题

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

最佳答案

这是您可以强制注册元素的一种方法(我相信这就是您的第一个元素正在尝试做的事情)。我稍微简化了您的示例。

<!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>

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

关于javascript - polymer 元素未从字符串/文本注册到 polymer 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26329456/

相关文章:

javascript - ImageMapster 具有多个图像和 map

javascript - 增加对象框的大小以删除滚动条

dart - 嵌套 polymer 模板继承

实际有效的Python html解析

dart - 模板重复 模板重复

javascript - CSS 不适用于 Chrome 中的 Polymer 2 Web 组件

javascript - 根据它们所在的背景显示文本颜色

Javascript 事件委托(delegate),处理点击元素的 parent ?

javascript - 将回调存储在对象中

php - HTML 或 PHP 单选按钮的奇怪行为?