如何使用Web组件

Question

亲爱的聚合物社区，

我很难学习聚合物并遵循网络上的文档和教程。

我是一位经验丰富的服务器端C ++和Java开发人员。但我与前端和网络开发的关系从来没有顺利过。

也许这是因为Web开发不断变化，文档和教程假设用户带来了以前Web框架的一些经验。

几年前，我不得不为我的团队正在开发的嵌入式盒子实现一个Web界面。我使用bootstrap和AngularJs完成了Web组件。我非常喜欢这个项目，与为嵌入式平台编写c ++相比，这是一个清新的空气。我也非常喜欢AngularJs如何将MVC模式应用到网页中。

快进到现在，现在谷歌聚合物和网络组件都是新的时尚潮流。

通过聚合物教程并阅读一些关于Web组件的内容。我认为重用Web组件是个好主意。只需浏览庞大的现有Web组件库，选择您想要的内容即可。理论上听起来不错......除了......像我这样的新手到目前为止一直无法正确使用单个Web组件。

我发现文档缺乏，示例代码不准确。让我来看一个简单的例子。我想要使用的一个Web组件是iron-pages。令人敬畏的Web组件，这正是我需要的！

我阅读了iron-pages的文档并查看了webcomponents.org上的演示，现在是时候使用它了。除了我不能让事情发挥作用。

这正是我在命令行中使用polymer-cli所做的

mkdir my-app
cd my-app
polymer init

我选择了聚合物-2应用

我试试我的应用程序

polymer serve --open

华友世纪它显示你好我的应用程序的应用程序！在网页上

接下来我尝试使用iron-pages Web组件。所以我需要使用bower下载该组件

bower install --save PolymerElements/iron-pages

iron-pages的演示列出了here以及示例代码。但是示例代码与Web组件中应该出现的内容不匹配...或者至少我在使用web组件的教程中读到的内容。

该示例代码中没有标记。有一个标签不应该在那里。我相信一位经验丰富的网络开发人员会知道如何弥合差距......但不是我。

我尽力调整iron-pages示例代码以适应我的文件src/my-app-app/my-app-app.html

这是我的代码：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">

<dom-module id="my-app-app">
  <template>
    <style>
      :host {
        display: block;
      }

      iron-pages {
        width: 100%;
        height: 200px;
        font-size: 50px;
        color: white;
        text-align: center;
      }

      iron-pages div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      iron-pages div:nth-child(1) {
        background-color: var(--google-blue-500);
      }

      iron-pages div:nth-child(2) {
        background-color: var(--google-red-500);
      }

      iron-pages div:nth-child(3) {
        background-color: var(--google-green-500);
      }

    </style>

    <h2>Hello [[prop1]]!</h2>

    <iron-pages selected="0">
       <div>One</div>
       <div>Two</div>
       <div>Three</div>
    </iron-pages>

  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class MyAppApp extends Polymer.Element {
      static get is() { return 'my-app-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'my-app-app'
          }
        };
      }
    }

    window.customElements.define(MyAppApp.is, MyAppApp);

    var pages = document.querySelector('iron-pages');
    pages.addEventListener('click', function(e) {
       pages.selectNext();
    });

  </script>
</dom-module>

iron-pages没有出现在网页上。 chrome上的开发人员控制台显示错误，我试图在空指针上执行addEventListener。所以我试着注释掉addEventListener部分。即使我无法点击在页面之间旋转，我仍然希望看到其中一个iron-pages。但铁页仍然没有出现。

如果您有经验的网络开发者可以启发我，我将不胜感激。我还有其他我无法完美使用的网络组件的例子，例如app-toolbar，我无法让iron-icon出现......即使我在bower安装铁图标。无论如何，如果我能开始把我的iron-pages连接起来，我会很高兴。

Answer 1

另一答案