标签: polymer-starter-kit

Polymer Starter Kit和Polymer App Toolbox有什么区别？

两者都是Web组件,构建和测试工具以及用于使用Polymer构建Progressive Web Apps的Material Design模板的集合.

我应该以新项目为基础的哪一个？

该聚合物入门套件是一个很好的参考,以启动一个项目的聚合物.您只需将所有元素放入app/elements文件夹即可.这适用于中小型项目.

当你有超过30个元素时,它会变得混乱.然后,您想要将平面elements文件夹重构为更深层的文件夹结构,如下所示:

- elements -- my-module-1 --- my-element-1-1 --- my-element-1-2 -- my-module-2 --- my-submodule-2-1 ---- my-element-2-1-1 ---- my-element-2-1-2 --- my-submodule-2-2 ---- ...

有几个问题:

• 当你想演示和测试子模块时,你需要导入每个元素定义之上的所有依赖项
• 你打破了"所有元素都是兄弟姐妹"的模式
• 你的相对路径变得凌乱(很多../../../my-module-x/my-module-y)
• 你要么有很多路径,../../../../bower_components要么你使用/bower_components,那么你需要在你的开发服务器中有一个重定向,绝对路径会吞噬gulp-vulcanize.
• 通过每个元素的演示和测试文件夹,您的目录结构可以非常快速地增长

这是一篇很好的文章,描述了这个问题并指出了两个解决方案:

• 单独的元素存储库
• 构建可重用元素

像Topeka App中的单独元素存储库适用于~30个元素,但是一旦你有多达100个元素,你就会遇到同样的问题.

一开始,构建可重用元素似乎是一个好主意,因为您可以很好地封装所有内容.但是,处理数百个repos是很痛苦的,当你想要在repo中拥有多个单个元素时,标准模式会中断.

所以我想知道,有关如何构建大型Polymer应用程序的良好实践？是否有任何项目的例子超过30个元素？

包含多个元素的可重用元素repos的优良做法是什么？

多个入口点的良好结构是什么？

一般来说:您如何扩展聚合物项目？

我正在测试我的Polymer应用程序,我在Lighthouse上获得了不错的分数.但是,我还有一个小问题.我有一个manifest.json包含所有内容的文件,因此应用程序可以添加到主屏幕,但灯塔仍然失败说:Manifest start_url is not cached by a Service Worker..我正在使用Polymer Starter Kit 2.0,我不知道如何使用Service Worker缓存它.我有一个sw-precache-config.js包含:

module.exports = {
  staticFileGlobs: [
    '/index.html',
    '/index.html?launcher=true',
    '/manifest.json',
    '/bower_components/webcomponentsjs/*',
  ],
  navigateFallback: '/index.html',
};

/index.html?launcher=true清单的start_url 在哪里.

题

放置<script>标签的方法是"最佳实践？"

• 里面的<dom-module>？

要么

• 外面的<dom-module>？

另外,请回答:

1. 为什么？
2. 你的答案来源是什么？
3. 以"错误"的方式做出哪些下行风险？

聚合物入门套件:OUTSIDE

在聚合物入门套件,将my-list.html和my-greeting.html文件放置<script>标签之外的<dom-module>.

像这样:

<dom-module>
  <style>...</style>
  <template>...</template>
<dom-module>
<script>...</script>

其他专家:INSIDE

从谷歌的员工和谷歌的开发人员.然而,我已经听到和看到的几个例子暗示的<script>标签应该去里面的<dom-module>.

像这样:

<dom-module>
  <style>...</style>
  <template>...</template>
  <script>...</script>
<dom-module>

我正在使用聚合物cli的聚合物应用抽屉模板.

我遇到了一些麻烦:

1. 加载新页面时,将导入html元素; 然后它的代码执行
2. 当我移动到另一个页面时,上一页的代码仍在运行.

有没有办法销毁和创建页面/元素或暂停和启用？

什么是处理这个问题的最佳做法？

页面是否实现了create和destroy方法,并在更改页面时调用它？

即

oldPageElement.destroy();
newPageElement.create();



Polymer({
  is: 'my-random-page',
  behaviors: [MyBehaviors.CommonPageBehavior],


 /**
  * @override
  */
  create: function() {..}



 /**
  * @override
  */
  destroy: function() {..}

})

我想创建一个响应式网站,其中包含Polymer Starter Kit +预构建的聚合物元素.

现在,如何在像bootstrap这样的css框架中实现像容器或网格这样的东西？

是否可以只使用Polymer,或者我唯一的选择是我自己的自定义代码,还是框架/网格系统,如骨架,波旁威士忌等等？

我试着看看iron-flex-layout,但是它不会像小屏幕尺寸上的网格那样在彼此之上崩溃,你可以在这里看到它:

http://plnkr.co/edit/ds6gAyohtZW4ESkxu83o?p=preview

 <div class="horizontal layout" style="height:100%">
    <div class="flex-1">
      Left column
    </div>
    <div class="flex-4">
      Right column
    </div>
  </div>

它不会"崩溃",所以如果您调整窗口大小,它们将在彼此之下,它只是缩放.

那么,我该怎么做呢？

编辑:我想实现这样的目标:http: //www.bootply.com/4CJ9GOYEuH

因此,如果您调整窗口大小,则dics将会折叠到彼此的顶部,而不是彼此相邻.

我有一种情况,我正在为我的应用程序使用聚合物启动器套件模板.我的polymer.json文件看起来像这样:

    {
      "entrypoint": "index.html",
      "shell": "src/my-app.html",
      "fragments": [

      ],
      "sourceGlobs": [
       "src/**/*",
       "images/**/*",
       "bower.json"
      ],
      "includeDependencies": [
        "manifest.json",
        "bower_components/webcomponentsjs/webcomponents-lite.min.js"
      ]
    }

当我使用polymer-cli命令构建 - '聚合物构建'时,捆绑的文件夹似乎错过了shell文件'my-app.html'.

如果我删除

"shell": "src/my-app.html",

从polymer.json文件中,my-app.html文件在bundle/src文件夹中创建,但它应该会丢失index.html文件.

我正在使用聚合物 - 启动器 - 套件模板并向其中添加文件.我无法弄清楚为什么my-app.html或index.html会丢失,具体取决于Polymer.json的配置方式.

你能告诉我这里出了什么问题吗？

谢谢.

考虑一下我: -

• PWA myapp.firebaseapp.com与它自己一起manifest.json.
• PWA的管理员 myapp.firebaseapp.com/admin

是否有可能有另一个manifest.json用于管理URL以允许同一PWA"添加到主屏幕"？

我想制作单页应用程序.当我去路径时localhost/person-info/101,如何使用page.js将URL参数转换为Polymer元素？

person-info在使用neon-animated-page更改页面之前,我必须使用这些参数来选择或更改元素中的数据

内容app.js:

window.addEventListener('WebComponentsReady', function () {
    var app = document.querySelector('#app');
    page('/', home);
    page('/person-info/:user', showPersonInfo);

    page({
        hashbang: true
    });

    function home() {
        app.route = 'index';

        console.log("app route" + app.route);
        console.log("home");
    }

    function showPersonInfo(data) {
        console.log(data);
        console.log(data.params.user);

        app.params = data.params;

        app.route = 'person-info';
    }
});

还有我的Polymer元素 person-info.html

<link rel="import" href="bower_components/iron-list/iron-list.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">

<script type="text/javascript" src="bower_components/jquery-2.1.4.min/index.js"></script>
<script src="js/app.js"></script>

<dom-module id="person-info">
    <style>
        :host {
            display: block;
            font-family: sans-serif;
            @apply(--layout-fit); …

当我通过链接或通过JS this.set('route.path','packages')更改页面时; _routePageChagned方法正在运行两次.它也发生在第一次加载页面时.

这也发生在CLI的默认聚合物入门套件模板构建中.

我错过了什么？怎么会发生这种情况？

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="my-icons.html">

<link rel="import" href="pages/my-loading.html">

<dom-module id="my-app">
  <template>
    <style>
    </style>


    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

        <iron-pages
            id="pages"
            selected="[[page]]"
            attr-for-selected="name"
            fallback-selection="view404"
            selected-attribute="visible"
            role="main">

          <my-loading name="loading"></my-loading>
          <my-login name="login"></my-login>
          <my-view404 name="view404"></my-view404>
          <my-view403 name="view403"></my-view403>
          <my-packages name="packages"></my-packages>
        </iron-pages>
  </template>

  <script>
    Polymer({
      is: 'my-app',

      properties: {
        /**
         * The current page.
         */
        page: {
          type: String,
          reflectToAttribute: true
        },
      },

      observers: [
        '_routePageChanged(routeData.page)'
      ],


      _routePageChanged: function(page) …