2016-06-08 3 views
0

Ok. 이것은 테이블을 넘기고 Polymer에게 작별 인사 할 때까지 나의 최후의 수단입니다. 나는 Polymer에서 몇 가지 기본적인 것들을하기 위해 지난 3 일 동안 노력했지만, 그렇게 할 수 없었다. 몇 가지 종이 요소를 포함하고 캐싱 (크롬의 도구 상자에서 사용하지 않도록 설정하지 않은 경우)이 가장 효과적인지 알 수없는 경우가 있습니다. 또한 프로젝트를 디버그 할 수있는 방법이 없습니다. ...번들 재설치 후에도 폴리머 요소가 올바르게 작동하지 않습니다.

<paper-dropdown-menu>과 github : <simple-slider>에서 다운로드 한 사용자 지정 요소를 사용하여 시도 할 때까지 라이브러리를 마침내 파악하기 시작했습니다.

단순 슬라이더가 작동하지 않는 것 같습니다 (캐 러셀이 올바르게 표시되지 않음). 종이 드롭 다운 메뉴는 항목을 선택하지 않습니다.

모든 종속성이 성공적으로 참조되었으며 (Visual Studio Code로 확인) webComponents polyfill도 포함되었습니다.

<!doctype html> 
<!-- 
@license 
Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 
Code distributed by Google as part of the polymer project is also 
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 
--> 

<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="generator" content="Polymer Starter Kit"> 
    <title>Polymer Starter Kit</title> 

    <!-- Place favicon.ico in the `app/` directory --> 

    <!-- Chrome for Android theme color --> 
    <meta name="theme-color" content="#2E3AA1"> 

    <!-- Web Application Manifest --> 
    <link rel="manifest" href="manifest.json"> 

    <!-- Tile color for Win8 --> 
    <meta name="msapplication-TileColor" content="#3372DF"> 

    <!-- Add to homescreen for Chrome on Android --> 
    <meta name="mobile-web-app-capable" content="yes"> 
    <meta name="application-name" content="PSK"> 
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png"> 

    <!-- Add to homescreen for Safari on iOS --> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit"> 
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png"> 

    <!-- Tile icon for Win8 (144x144) --> 
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> 

    <!-- build:css styles/main.css --> 
    <link rel="stylesheet" href="styles/main.css"> 
    <!-- endbuild--> 

    <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js --> 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> 
    <!-- endbuild --> 

    <!-- Because this project uses vulcanize this should be your only html import 
     in this file. All other imports should go in elements.html --> 
    <link rel="import" href="elements/elements.html"> 

    <!-- For shared styles, shared-styles.html import in elements.html --> 
    <style is="custom-style" include="shared-styles"></style> 
</head> 

<body unresolved> 
    <!-- build:remove --> 
    <span id="browser-sync-binding"></span> 
    <!-- endbuild --> 

    <template is="dom-bind" id="app"> 

    <pgarena-navbar></pgarena-navbar> 
    <simple-slider style="width:100%; height:500px" auto-play="true"> 
     <img src="https://placehold.it/350x150"/> 
     <img src="https://placehold.it/350x150"/> 
     <img src="https://placehold.it/350x150"/> 
    </simple-slider> 

    <div class="container"> 
     <paper-dropdown-menu label="Dinosaurs"> 
     <paper-listbox class="dropdown-content"> 
      <paper-item>allosaurus</paper-item> 
      <paper-item>brontosaurus</paper-item> 
      <paper-item>carcharodontosaurus</paper-item> 
      <paper-item>diplodocus</paper-item> 
     </paper-listbox> 
     </paper-dropdown-menu> 

    <pgarena-tournament-card> 

     </pgarena-tournament-card> 
     <pgarena-tournament-card> 
     </pgarena-tournament-card> 
     <pgarena-tournament-card> 
     </pgarena-tournament-card> 
     <pgarena-tournament-card> 
     </pgarena-tournament-card> 
    </div> 


    <!-- Uncomment next block to enable Service Worker support (1/2) --> 
    <!-- 
    <paper-toast id="caching-complete" 
       duration="6000" 
       text="Caching complete! This app will work offline."> 
    </paper-toast> 

    <platinum-sw-register auto-register 
          clients-claim 
          skip-waiting 
          base-uri="bower_components/platinum-sw/bootstrap" 
          on-service-worker-installed="displayInstalledToast"> 
     <platinum-sw-cache default-cache-strategy="fastest" 
         cache-config-file="cache-config.json"> 
     </platinum-sw-cache> 
    </platinum-sw-register> 
    --> 

    </template> 

    <!-- build:js scripts/app.js --> 
    <script src="scripts/app.js"></script> 
    <!-- endbuild--> 
</body> 

</html> 

Elements.html : BTW

<!-- 
@license 
Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 
Code distributed by Google as part of the polymer project is also 
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 
--> 

<!-- Iron elements --> 
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html"> 
<link rel="import" href="../bower_components/iron-icons/iron-icons.html"> 
<link rel="import" href="../bower_components/iron-pages/iron-pages.html"> 
<link rel="import" href="../bower_components/iron-selector/iron-selector.html"> 

<!-- Paper elements --> 
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html"> 
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../bower_components/paper-item/paper-item.html"> 
<link rel="import" href="../bower_components/paper-material/paper-material.html"> 
<link rel="import" href="../bower_components/paper-menu/paper-menu.html"> 
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html"> 
<link rel="import" href="../bower_components/paper-styles/typography.html"> 
<link rel="import" href="../bower_components/paper-toast/paper-toast.html"> 
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html"> 
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 

<!-- App Elements --> 
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html"> 


<!-- Custom Elements --> 
<link rel="import" href="pgarena-navbar/pgarena-navbar.html"> 
<link rel="import" href="pgarena-container/pgarena-container.html"> 
<link rel="import" href="pgarena-tournament-card/pgarena-tournament-card.html"> 

<!-- 3rd Party Non Google --> 
<link rel="import" href="../bower_components/polymer-simple-slider/src/simple-slider.html"> 


<!-- Uncomment next block to enable Service Worker Support (2/2) --> 
<!-- 
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html"> 
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html"> 
--> 

<!-- Configure your routes here --> 
<link rel="import" href="routing.html"> 

<!-- Add your elements here --> 
<link rel="import" href="../styles/app-theme.html"> 
<link rel="import" href="../styles/shared-styles.html"> 
<link rel="import" href="my-greeting/my-greeting.html"> 
<link rel="import" href="my-list/my-list.html"> 

: 여기

내 주요 .html 중에서 파일입니다 나는 모든 정자 패키지를 다시 설치하려했지만 작동하지 않았다. 최신 Polymer를 bower_components 폴더에 압축 해제하려고했으나 작동하지 않았습니다.

아이디어가 있으십니까? 나는 이것이 사용하는 것이 고통 스럽다는 것을 믿을 수 없다.

답변

1

간단한 슬라이더 난 당신이 polymer-simple-slider를 참조한다고 가정 (정확하게 회전 목마를 표시하지 않습니다)

작동하지 않습니다. 이 프로젝트는 최신 버전의 Polymer (이 글을 쓰는 시점에서 1.10.1)와 호환되지 않는 Polymer 0.2.x에 달려 있습니다. 해당 요소를 업그레이드하는 데 관심이 있으시면 migration guide을 팔로우하십시오. 요소의 출처는 매우 사소 해 보입니다. IMO 업그레이드를 위해 많은 노력을 기울이지는 않습니다.

paper-drop-down-menu는 항목을 선택하지 않습니다.

무슨 뜻인지 분명히 말하십시오. 선택은 잘 여기에 작동합니다

<head> 
 
    <base href="https://polygit.org/polymer+1.10.1/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="neon-animation/web-animations.html"> 
 
    <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html"> 
 
    <link rel="import" href="paper-listbox/paper-listbox.html"> 
 
    <link rel="import" href="paper-item/paper-item.html"> 
 
</head> 
 
<body> 
 
    <paper-dropdown-menu label="Dinosaurs"> 
 
    <paper-listbox slot="dropdown-content" class="dropdown-content"> 
 
     <paper-item>allosaurus</paper-item> 
 
     <paper-item>brontosaurus</paper-item> 
 
     <paper-item>carcharodontosaurus</paper-item> 
 
     <paper-item>diplodocus</paper-item> 
 
    </paper-listbox> 
 
    </paper-dropdown-menu> 
 
</body>

codepen

+0

AAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaargh합니다. 나는 paper-listbox @ _ @를 놓치고 있었다. tony, Polymer로 작업 할 때 유용한 정보를 얻고 싶습니다. 어떻게 그것을 배웠습니까? 쪽지에, 해당 모듈이 0.2임을 알려 주셔서 감사합니다. 차라리 배경 이미지와 CSS로 뭔가 다른 것을 구현하고자하므로 배경 이미지와 CSS를 업그레이드하지 않을 것입니다. 그래서 배경 크기의 "표지"속성을 활용할 수 있습니다. 무리 감사.!!! –

+0

BTW, Google 크롬이 html 가져 오기를 포착하지 못하고 있는지 어떻게 알 수 있습니까?개발자 도구 (DevTools가 열려있는 동안 캐시 사용 안 함) 설정을 비활성화했습니다. –

+1

도움이 되었기 때문에 기쁩니다. 문서를 읽는 것 외에도 Polymer는 실험을 통해 Polymer를 학습하고 개별 요소 및 데모의 출처를 알아 냈습니다. Webstorm을 사용하면 Ctrl + 클릭으로 소스로 빠르게 이동할 수 있습니다. [Polymer App Toolbox] (https://www.polymer-project.org/1.0/toolbox/)가 나오기 전에 [yeoman] (https://github.com/yeoman/generator-polymer)이 도움이된다는 사실을 발견했습니다. 그런 다음 [PSK] (https://github.com/PolymerElements/polymer-starter-kit) (분명히 사용하고 있음)가 나타납니다. – tony19

관련 문제