簡體   English   中英

聚合物元素未從字符串/文本中注冊到聚合物中

[英]Polymer Element not registered in polymer from string/text

有人可以幫助我說明在此示例中我做錯了什么-http://jsbin.com/bekoxo/2/edit?html,輸出#H:L23

Chrome瀏覽器的屏幕截圖位於-https://www.dropbox.com/s/t6uua7h714h2otg/Screenshot%202014-10-13%2001.32.54.png ?dl=0

我可以發現元素(appler-page)未成功注冊,模板顯示文檔碎片,而不是所需的影子根

成功渲染了第二個元素,其中聚合物定義是標記(相同標記)的一部分。

有人可以指出我想念的東西,以便使示例的第一部分也能起作用。

(通過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

緊跟我發現的最新Polymer版本的另一個實例。

這是一段有用的代碼,如果其他人嘗試相同的事情,它們可能會有所幫助。

我為導入導入切換到Polymer-project.org地址,並且可以正常工作。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM