Polymer示例不适用于Firefox

时间:2014-12-13 07:18:11

标签: javascript firefox polymer

当我意识到我的paper-dropdown-menu元素没有在更新的Firefox上运行但在Chrome中没有问题时,我正在编写一个Polymer应用程序。

所有bower组件都已正确安装和访问。任何浏览器都没有控制台错误。

<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

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

    <link rel="import" href="bower_components/core-menu/core-menu.html">
    <link rel="import" href="bower_components/paper-item/paper-item.html">
    <link rel="import" href="bower_components/paper-dropdown/paper-dropdown.html">
    <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="bower_components/paper-button/paper-button.html">
</head>

<body>

    <style>
        paper-dropdown-menu {
            left: 24px;
            width: 180px;
        }
    </style>

      <paper-dropdown-menu label="Your favorite food">
          <paper-dropdown class="dropdown">
              <core-menu class="menu">
                  <paper-item>Pasta</paper-item>
                  <paper-item>Pizza</paper-item>
              </core-menu>
          </paper-dropdown>
      </paper-dropdown-menu>

      <paper-button raised>CLICK ME</paper-button>
</body>
</html>




更新:我尝试下载paper-dropdown-menu demo并在localhost中运行它。使用bower安装所有组件但仍然无法在Firefox中运行。在Chrome中运行良好。

<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>

<link href="bower_components/core-collapse/core-collapse.html" rel="import">
<link href="bower_components/core-menu/core-menu.html" rel="import">
<link href="bower_components/paper-dropdown/paper-dropdown.html" rel="import">
<link href="bower_components/paper-item/paper-item.html" rel="import">
<link href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
</head>
<body>

<template is="auto-binding">

    <paper-dropdown-menu label="Your favorite pastry">
        <paper-dropdown class="dropdown">
        <core-menu class="menu">
            <template repeat="{{pastries}}">
            <paper-item>{{}}</paper-item>
            </template>
        </core-menu>
        </paper-dropdown>
    </paper-dropdown-menu>

</template>

<script>
    scope = document.querySelector('template[is=auto-binding]');

    scope.pastries = [
    'Apple fritter',
    'Croissant',
    'Donut'
    ];
</script>

</body>
</html>

1 个答案:

答案 0 :(得分:2)

由于某种原因,它无法在localhost端口8000上运行,但在localhost端口80上运行良好。

只需像这样运行本地服务器:

sudo python -m SimpleHTTPServer 80