폴리머 요소 사용 방법

저는 Polymer에서 몇 가지 데모 작업을하고 있습니다. 여기이 하나폴리머 요소 사용 방법

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"라는 폴리머 요소의 내부 데모를 캡슐화하기를 원하지만 그것은 작동하지 않습니다 : 나는 내부의 요소 가져 오기를 사용할 때

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

아무 것도 표시하지에 beeing됩니다 내 index.html을 : 난 그냥 폴리머 요소 내에 데모의 코드를 삽입 한 다음 내 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>

누군가가 나에게 설명 할 수주십시오?

대단히 감사합니다.

조지.

출처

2014-10-08 LoveAndHappiness

두 가지 : document.querySelector()는 여기에서 작동하지 않습니다. 고분자 요소는 그림자 DOM을 사용하여 CSS 및 querySelector()에서 요소를 숨기고 어려운 작업을 수행했습니다. 태그가 <template> 안에 있으면 안되며, 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

들으 여룹. 정확하게 q = "크롬"을하고 무엇을 포함시켜야합니까? – LoveAndHappiness

글쎄, 당신이 이것을 원한다면 ('chrome'을 위해) 이제까지 하나의 검색 이외의 다른 것을하지 말고, 그것을 포함시킬 필요가 없습니다 -이 예에서 그것은 장소에서 동적으로 쿼리를 변경하는 것을 간단하게합니다. 요소가 만들어집니다. – Jerub

폴리머 요소 사용 방법

답변

관련 문제