标签: polymer-starter-kit

Polymer Starter Kit(PSK)包含有关在Firebase HERE上托管时使用Pretty URL的说明

我试图使用Nginx Server做类似的事情,但无法弄清楚页面重新加载的位置块.使用PSK附带的示例数据,您将如何配置"/ users/sam".

我正在尝试使用Polymerfire和Polymer App Toolbox模板将数据推送到Firebase:

• my-app.html包含已配置的<firebase-app>组件.
• my-models.html(在my-app.html路由中配置的页面)包含<add-model>组件
• <add-model>是具有一种形式<firebase-query>,<firebase-auth>,输入和提交按钮.

• 我尝试使用对象中<firebase-query>的以下函数来推送数据add-model.html Polymer:

  Polymer({
      is: 'add-model',
      properties: {
          data: {
              type: Object
          }
      },
      create: function() {
         this.$.query.ref.push({
             name: this.$.myModelName.value
          });
      }
  });
  

  Run Code Online (Sandbox Code Playgroud)

  结果

• 调用push上<firebase-query>的目标add-model.html回报率Cannot read property 'push' of undefined(在此Q/A解释说,在我们的情况下,这是因为<firebase-app>似乎没有被正确声明).

• 移动<firebase-app>从my-app.html到add-model.html文件确实让push功能工作,但后来my-app.html失去了火力地堡的功能.
• 同时调用<firebase-app>my-app.html和add-model.html返回Uncaught Error: …

我正在尝试使用Polymer 项目中的PWA Starter Kit制作一个小应用程序。

是否可以在我的 LitElement 中使用来自https://material.io/develop/web/components/input-controls/text-field/的 Web 组件？我想使用文本区域。

我尝试过的：

import {html, customElement, LitElement} from "lit-element";
//
import {MDCTextField} from '@material/textfield';

@customElement('text-editor')
export class TextEditor extends LitElement {

    protected render() {
        return html`<div class="mdc-text-field mdc-text-field--textarea">
  <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
  <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
    <div class="mdc-notched-outline__notch">
      <label for="textarea" class="mdc-floating-label">Textarea Label</label>
    </div>
    <div class="mdc-notched-outline__trailing"></div>
  </div>
</div>`
    }

}

但是，因为我不在任何地方使用“MDCTextField”，TypeScript 编译器抱怨“'MDCTextField' 已声明，但它的值从未被读取。”。

我确实在 HTML 中呈现了一个文本区域，但没有应用任何样式。

如何在 LitElement 中重用 MDCTextField Web 组件？

这是代码:

<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<dom-module id="journal-entry">
  <template>
    <paper-dropdown-menu label="Choose tag">
        <paper-listbox class="dropdown-content">
            <template is="dom-repeat" items="{{journal_tags}}">
                <paper-item>
                    {{item.tag}}
                </paper-item>
            </template>
        </paper-listbox>
    </paper-dropdown-menu>
    <paper-textarea label="journal_entry_text_area">
    </paper-textarea>
  </template>
  <script>
      (function() {
        'use strict';

    Polymer({
      is: 'journal-entry',
        ready : function(){
            this.journal_tags=[
                {tag:'meeting'},
                {tag:'payment'},
                {tag:'general_message'}
            ];
        }
        });
  })();
  </script>
</dom-module>

我期待paper-textarea项目出现,但事实并非如此.只有下拉列表出现在测试中.

我的一个想法是它可能无法正确导入,但纸张输入的导入是我在文档中找到的所有内容.

我的另一个想法是mabe我应该为paper-textarea项目定义一些宽度和高度样式？但这也没有出现在文档中.

我已经安装了一个新的Polymer Starter Kit,并且有以下代码.

<app-drawer-layout fullbleed>

      <!-- Drawer content -->
        <app-drawer>
          <app-toolbar>

如何在布局加载时关闭app-drawer元素？

如果我在元素上触发.close()应该何时运行？它不适用于准备好的或附加的生命周期回调

但这意味着菜单打开和关闭,我想避免,我真正想要发生的是当页面加载菜单关闭时,

当我从服务器收到一个回调来说用户已经过身份验证然后打电话

this.$.menu.open() // where i've given app-drawer the if of menu

我使用的有一些聚合物入门套件paper-icon-buttons上的paper-toolbar默认.

<body unresolved class="fullbleed layout vertical">
  <template is="dom-bind" id="app">
  <paper-drawer-panel id="paperDrawerPanel" forceNarrow>
   <paper-header-panel main mode="flex">
    <!-- Main Toolbar -->
    <paper-toolbar id="mainToolbar">

      <!-- Toolbar icons -->
        <paper-icon-button icon="search"></paper-icon-button>
        <paper-icon-button icon="refresh" on-tap='refreshTapped'></paper-icon-button>

      </paper-toolbar>

    </paper-header-panel>
  </paper-drawer-panel>
</template>

<script src="scripts/app.js"></script>

如何on-tap在刷新按钮上添加监听器？我试图添加scripts/app.js如下所示的侦听器方法,但仍无法找到该方法.

function refreshTapped(){ 
  document.querySelector('#myDialog').toggle();
}

当我点击按钮时,我在浏览器控制台上看到了这个:

`[dom-bind::_createEventHandler]: listener method `refreshTapped` not defined`