即使在重新安装凉亭后,聚合物元件也无法正常工作

时间:2016-06-08 02:25:30

标签: polymer

确定。这是我的最后一招,直到翻转桌子并向Polymer告别。在过去的3天里,我一直在尝试在聚合物中做一些基本的东西,但我还没有能够这样做。在包括一些纸质元素和缓存(显然甚至没有从Chrome的工具箱中禁用它)之间似乎工作了)我不知道哪个是给我最头疼的人。我也没办法调试项目。足够的咆哮......

我开始最终掌握了这个库,直到我尝试使用<paper-dropdown-menu>和从github下载的自定义元素:<simple-slider>

简单滑块似乎不起作用(没有正确显示轮播),而纸张下拉菜单则不选择该项目。

已成功引用所有依赖项(使用Visual Studio代码检查),并且还包含webComponents polyfill。

以下是我的主要.html文件:

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

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

BTW:我尝试重新安装所有的凉亭套餐,但它没有用。尝试将最新的Polymer解压缩到bower_components文件夹中并且无法正常工作。

有什么想法吗?我无法相信它使用起来很痛苦。

1 个答案:

答案 0 :(得分:1)

  

简单滑块似乎不起作用(没有正确显示轮播)

我假设你指的是polymer-simple-slider。该项目取决于Polymer 0.2.x,它与最新版本的Polymer(撰写本文时为1.10.1)不兼容。如果您对升级该元素感兴趣,可以按照migration guide进行操作。元素的来源看起来非常简单,升级IMO也不会花费太多精力。

  

纸张下拉菜单不会选择该项目。

请澄清你的意思。选择在这里工作正常:

<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