如何使用聚合物元素

我正在通過聚合物中的一些演示。這一次在這裏：如何使用聚合物元素

https://www.polymer-project.org/components/core-ajax/demo.html

，工程的代碼看起來是這樣的：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Ajax this.</title> 
    <script src="../bower_components/platform/platform.js"></script> 
    <link rel="import" href="../bower_components/polymer/polymer.html"> 
    <link rel="import" href="../bower_components/core-ajax/core-ajax.html"> 
</head> 
<body> 
    <core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" 
     params='{"alt":"json", "q":"chrome"}' 
     handleAs="json"></core-ajax> 

    <template repeat="{{response.feed.entry}}"> 
     <div>{{title.$t}}</div> 
    </template> 

    <script> 
     document.addEventListener('polymer-ready', function() { 
      var ajax = document.querySelector("core-ajax"); 
      ajax.addEventListener("core-response", 
       function(e) { 
        document.querySelector('template').model = { 
         response: e.detail.response 
        }; 
       } 
      ); 
     }); 
    </script> 
</body> 
</html>

哪個工作相當精細。但我想封裝聚合物元素，被稱爲「測試element.html」的這裏面的演示，但它不工作：是beeing顯示

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/core-ajax/core-ajax.html"> 

<polymer-element name="test-element"> 
    <template> 
     <core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" 
      params='{"alt":"json", "q":"chrome"}' 
      handleAs="json"></core-ajax> 

     <template repeat="{{response.feed.entry}}"> 
      <div>{{title.$t}}</div> 
     </template> 

     <script> 
      document.addEventListener('polymer-ready', function() { 
       var ajax = document.querySelector("core-ajax"); 
       ajax.addEventListener("core-response", 
        function(e) { 
         document.querySelector('template').model = { 
          response: e.detail.response 
         }; 
        } 
       ); 
      }); 
     </script> 
    </template> 

    <script> 
    Polymer('test-element', { 

    }); 
    </script> 
</polymer-element>

沒什麼，當我使用的元素和進口在裏面我的index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Javascript Playground</title> 
    <script src="../bower_components/platform/platform.js"></script> 

    <link rel="import" href="../bower_components/polymer/polymer.html"> 
    <link rel="import" href="test-element.html"> 
    <link rel="import" href="ajax-feedback.html"> 
</head> 
<body> 
    <style> 
    * {margin: 0; padding: 0;} 
    </style> 
    <h1>Hello World</h1> 
    <test-element></test-element> 
    <ajax-feedback></ajax-feedback> 
</body> 
</html>

請能有人向我解釋，爲什麼我不能只是把演示代碼中的聚合物元件內，然後重新導入我的index.html裏面？

非常感謝。

George。

來源

2014-10-08 LoveAndHappiness

有兩件事：document.querySelector（）在這裏不起作用：聚合物元素使用影子dom，它會隱藏CSS和querySelector（）中的元素，並且您已經很難做到這一點。你不應該在<template>裏面需要<script>標籤，並且你不需要硬編碼JS來將響應傳遞到它將被使用的地方。

這是最簡單的方法：

<link rel="import" href="/bower_components/polymer/polymer.html"> 
<link rel="import" href="/bower_components/core-ajax/core-ajax.html"> 

<polymer-element name="test-element" attributes="q"> 
    <template> 
     <core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" 
      params='{"alt":"json", "q":"{{q}}"}' 
      handleAs="json" response="{{response}}"></core-ajax> 
     <template repeat="{{response.feed.entry}}"> 
      <div>{{title.$t}}</div> 
     </template> 
    </template> 

    <script> 
    Polymer({ 
     response: null, 
    }); 
    </script> 
</polymer-element>

然後使用它：

<test-element q="chrome"></test-element>

來源

2014-10-08 21:39:51 Jerub

THX耶路。 q =「chrome」究竟是幹什麼的，爲什麼要包含它？ – LoveAndHappiness 2014-10-08 21:43:34

那麼，如果你希望它永遠不會做除了一次搜索以外的任何事情（對於'chrome'），那麼你不需要包含它 - 在這個例子中，它可以很容易地動態地從元素被創建。 – Jerub 2014-10-12 14:51:16

如何使用聚合物元素

回答

相關問題