Создание приложения Polymer 3 - добавить элемент - PullRequest
Новая
       42

Создание приложения Polymer 3 - добавить элемент

0 голосов
/ 19 сентября 2018

Я пытаюсь запустить приложение Polymer 3, следуя инструкциям на веб-сайте Polymer .Я сейчас пытаюсь добавить некоторые элементы"флажок" в приложение и тщательно следовал инструкциям, но он не работает!Я также ссылался на элемент paper-checkbox на webcomponents.org для проверки.

У меня npm install @polymer/paper-checkbox@next --save в моей корневой папке my-app.Я предоставил свой код ниже, может кто-нибудь сказать мне, если что-то изменилось или я что-то делаю неправильно?

my-new-view.js 

/* Load the PolymerElement base class and html helper function */
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

/* Load shared styles. All view elements use these styles */
import '@polymer/paper-checkbox/paper-checkbox.js';

import './shared-styles.js';


/* Extend the base PolymerElement class */
class MyNewView extends PolymerElement {
    /* Define a template for the new element */
    static get template() {
        return html`
          <paper-checkbox>Unchecked</paper-checkbox>
          <paper-checkbox checked>Checked</paper-checkbox>
          <paper-checkbox disabled>Disabled</paper-checkbox>
       `;
    }
}

/* Register the new element with the browser */
customElements.define('my-new-view', MyNewView);

my-app.js 

<!-- Drawer content -->
        <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
          <app-toolbar>Menu</app-toolbar>
          <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
            <a name="view1" href="[[rootPath]]view1">View One</a>
            <a name="view2" href="[[rootPath]]view2">View Two</a>
            <a name="view3" href="[[rootPath]]view3">View Three</a>
            <a name="new-view" href="[[rootPath]]new-view">New View</a>
          </iron-selector>

<iron-pages selected="[[page]]" attr-for-selected="name" role="main">
            <my-view1 name="view1"></my-view1>
            <my-view2 name="view2"></my-view2>
            <my-view3 name="view3"></my-view3>
            <my-new-view name="new-view"></my-new-view>
            <my-view404 name="view404"></my-view404>
          </iron-pages>

_routePageChanged(page) {
     // Show the corresponding page according to the route.
     //
     // If no page was found in the route data, page will be an empty string.
     // Show 'view1' in that case. And if the page doesn't exist, show 'view404'.
    if (!page) {
      this.page = 'view1';
    } else if (['view1', 'view2', 'view3', 'new-view'].indexOf(page) !== -1) {
      this.page = page;
    } else {
      this.page = 'view404';
    }

    // Close a non-persistent drawer when the page & route are changed.
    if (!this.$.drawer.persistent) {
      this.$.drawer.close();
    }
  }

  _pageChanged(page) {
    // Import the page component on demand.
    //
    // Note: `polymer build` doesn't like string concatenation in the import
    // statement, so break it up.
    switch (page) {
      case 'view1':
        import('./my-view1.js');
        break;
      case 'view2':
        import('./my-view2.js');
        break;
      case 'view3':
        import('./my-view3.js');
        break;
        case 'new-view':
          import('./my-new-view.js');
          break;
      case 'view404':
        import('./my-view404.js');
        break;
    }
  }
}
...