Polymer App 超过 1 个登陆页面
Polymer App more than 1 landpage
大家好,我目前正在从事一个新项目。基本上我正在尝试构建一个具有超过 1 个登陆页面的应用程序。
我选择iron-pages显示显示哪一页。我创建了 2 个自定义组件和 .目前只有h2标签。
[https://github.com/jeandersoncruz/my-app]
问题:这是正确的架构吗?为什么元素不在页面中呈现?
据我所知,您的架构没有问题。
也许检查依赖项的版本?
这是使用今天 (3/22/2017) 版本(wc 1.0.0-rc.6、shady 1.0.0-rc.2、polymer 2.0.0-rc.3、铁 2.0-预览)。
当 Polymer 2.0 最终版(即将发布)时,版本号将稳定下来。
<base href="//polygit.org/webcomponentsjs+webcomponents+v1.0.0-rc.6/shadycss+webcomponents+1.0.0-rc.2/polymer+v2.0.0-rc.3/iron*+polymerelements+:2.0-preview/components/"></script>
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="iron-pages/iron-pages.html">
<shell-app></shell-app>
<dom-module id="landpage-1">
<template>
<h2>Hello [[prop1]]</h2>
</template>
<script>
class Mylandpage1 extends Polymer.Element {
static get is() { return 'landpage-1'; }
static get properties() {
return {
prop1: {
type: String,
value: 'landpage-1'
}
};
}
}
window.customElements.define(Mylandpage1.is, Mylandpage1);
</script>
</dom-module>
<dom-module id="shell-app">
<template>
<style>
:host {
display: block;
}
</style>
<iron-pages selected="0">
<div><landpage-1></landpage-1></div>
<div><landpage-1></landpage-1></div>
</iron-pages>
</template>
<script>
class MyApplication extends Polymer.Element {
static get is() { return 'shell-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'shell-app'
}
};
}
}
window.customElements.define(MyApplication.is, MyApplication);
</script>
</dom-module>
大家好,我目前正在从事一个新项目。基本上我正在尝试构建一个具有超过 1 个登陆页面的应用程序。
我选择iron-pages显示显示哪一页。我创建了 2 个自定义组件和 .目前只有h2标签。
[https://github.com/jeandersoncruz/my-app]
问题:这是正确的架构吗?为什么元素不在页面中呈现?
据我所知,您的架构没有问题。
也许检查依赖项的版本?
这是使用今天 (3/22/2017) 版本(wc 1.0.0-rc.6、shady 1.0.0-rc.2、polymer 2.0.0-rc.3、铁 2.0-预览)。
当 Polymer 2.0 最终版(即将发布)时,版本号将稳定下来。
<base href="//polygit.org/webcomponentsjs+webcomponents+v1.0.0-rc.6/shadycss+webcomponents+1.0.0-rc.2/polymer+v2.0.0-rc.3/iron*+polymerelements+:2.0-preview/components/"></script>
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="iron-pages/iron-pages.html">
<shell-app></shell-app>
<dom-module id="landpage-1">
<template>
<h2>Hello [[prop1]]</h2>
</template>
<script>
class Mylandpage1 extends Polymer.Element {
static get is() { return 'landpage-1'; }
static get properties() {
return {
prop1: {
type: String,
value: 'landpage-1'
}
};
}
}
window.customElements.define(Mylandpage1.is, Mylandpage1);
</script>
</dom-module>
<dom-module id="shell-app">
<template>
<style>
:host {
display: block;
}
</style>
<iron-pages selected="0">
<div><landpage-1></landpage-1></div>
<div><landpage-1></landpage-1></div>
</iron-pages>
</template>
<script>
class MyApplication extends Polymer.Element {
static get is() { return 'shell-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'shell-app'
}
};
}
}
window.customElements.define(MyApplication.is, MyApplication);
</script>
</dom-module>