使用polymer init
cli 命令启动 polymer 应用程序后。
您已经提供了一个模板,其中包含应用程序的一些基本设置。它还包括路由设置。
如果你打开my-app.html
你可以看到以下内容:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
</iron-selector>
<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
</iron-pages>
现在一切都清楚了。 但是我们有这个页面的 javascript 实现,如下所示:
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// load page import on demand.
this.importHref(
this.resolveUrl('my-' + page + '.html'), null, null, true);
}
});
这里有一个问题:
为什么我们定义了两个观察者,一个是变量观察者,另一个是全局观察者?
一:
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
两个:
observers: [
'_routePageChanged(routeData.page)'
],
所以看起来我们正在观察同一个变量page
,但是在两个不同的地方。
最佳答案
它们是两个不同的变量,一个是this.page,另一个是this.routeData.page。
也许这可能是一个更好的解决方案:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[routeData.page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div title>My App</div>
</app-toolbar>
</app-header>
<iron-pages role="main" selected="[[routeData.page]]" attr-for-selected="name">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
对iron-selector和iron-pages上的选定属性使用routeData.page。
Polymer({
is: 'my-app',
properties: {
routeData: {
type: Object,
value: function () {
// Default page.
return { page: 'view1' };
}
},
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
var currentPage = page || 'view1';
this.importHref(
this.resolveUrl('my-' + currentPage + '.html'), null, null, true);
if (currentPage != this.routeData.page)
{
this.set('routeData.page', currentPage);
}
},
});
网址/something_ different_from_view[123] 仍然存在问题
如果在 _routePageChanged 中放置断点,您将看到空白 URL 会发生什么情况。
关于javascript - 应用程序抽屉模板中的 polymer 观察器。了解路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38135697/