聚合物 3 元素 - NotSupportedError
Polymer 3 Element - NotSupportedError
我已经开始学习 Polymer 3.0 入门教程并决定尝试一下。
我已经开始了一个新项目,我正在尝试将 paper-dropdown-menu
添加到 view1
以从数组中获取数据。
view1.js:
/**
* @license
* Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';
import './car-make.js'
class MyView1 extends PolymerElement {
static get template() {
return html`
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<div class="card">
<div class="circle">1</div>
<h1>View One</h1>
<car-make></car-make>
</div>
`;
}
}
window.customElements.define('my-view1', MyView1);
我已经创建了一个可以做到这一点的元素,当我 运行 演示时它工作得很好
汽车-make.js元素:
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import {} from '@polymer/polymer/lib/elements/dom-repeat.js';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';
/**
* `car-make`
* Car manufacturers dropdown
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class CarMake extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
}
</style>
<paper-dropdown-menu label="Car manufacturer">
<paper-listbox slot="dropdown-content" required>
<template is="dom-repeat" items="{{cars}}">
<paper-item>{{item}}</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
`;
}
static get properties() {
return {
cars: {
type: Array,
value: getCars(),
}
};
}
constructor() {
super();
}
}
function getCars() {
return ['AC', 'ALPINA', 'Abarth'];
}
window.customElements.define('car-make', CarMake);
但是当我将它添加到 my-view1.js:
时,它总是失败并由 polymer-fn.js
在第 49
行触发 NotSupportedError: Operation is not supported
customElements.define(klass.is,
/** @type {!HTMLElement} */
klass);
return klass
这是触发错误的函数。我做错了什么?
在属性样式下定义汽车值是错误的,而是使用:
static get properties() {
return {
cars: {
type: Array
}
};
}
constructor() {
super();
this.cars=['AC', 'ALPINA', 'Abarth' ];
}
此处Demo(它正在运行,但可能会因额外的依赖项而出错。(只是为了保护它)
我已经开始学习 Polymer 3.0 入门教程并决定尝试一下。
我已经开始了一个新项目,我正在尝试将 paper-dropdown-menu
添加到 view1
以从数组中获取数据。
view1.js:
/**
* @license
* Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';
import './car-make.js'
class MyView1 extends PolymerElement {
static get template() {
return html`
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<div class="card">
<div class="circle">1</div>
<h1>View One</h1>
<car-make></car-make>
</div>
`;
}
}
window.customElements.define('my-view1', MyView1);
我已经创建了一个可以做到这一点的元素,当我 运行 演示时它工作得很好
汽车-make.js元素:
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import {} from '@polymer/polymer/lib/elements/dom-repeat.js';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';
/**
* `car-make`
* Car manufacturers dropdown
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class CarMake extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
}
</style>
<paper-dropdown-menu label="Car manufacturer">
<paper-listbox slot="dropdown-content" required>
<template is="dom-repeat" items="{{cars}}">
<paper-item>{{item}}</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
`;
}
static get properties() {
return {
cars: {
type: Array,
value: getCars(),
}
};
}
constructor() {
super();
}
}
function getCars() {
return ['AC', 'ALPINA', 'Abarth'];
}
window.customElements.define('car-make', CarMake);
但是当我将它添加到 my-view1.js:
时,它总是失败并由polymer-fn.js
在第 49
行触发 NotSupportedError: Operation is not supported
customElements.define(klass.is,
/** @type {!HTMLElement} */
klass);
return klass
这是触发错误的函数。我做错了什么?
在属性样式下定义汽车值是错误的,而是使用:
static get properties() {
return {
cars: {
type: Array
}
};
}
constructor() {
super();
this.cars=['AC', 'ALPINA', 'Abarth' ];
}
此处Demo(它正在运行,但可能会因额外的依赖项而出错。(只是为了保护它)