我正在使用Polymer构建一个由core-ajax和WordPress JSON API支持的单页网站。。。
我想知道如何实现我的核心子菜单项的url路由？
我已经在使用flatiron director作为我的主要部分url，但我不知道如何将其应用于我的子菜单。。。
Dev。网址：http://winkstrategies.com/impactory_dev/
谢谢你的帮助！
来源
app/INDEX.HTML:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMPACTORY</title>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- endbuild -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
</head>
<body unresolved fullbleed layout vertical>
<template is="auto-binding" id="app">
<!-- Route controller. -->
<flatiron-director route="{{ route }}" autoHash></flatiron-director>
<!-- Keyboard nav controller. -->
<core-a11y-keys id="keys" target="{{ parentElement }}"
keys="up down left right"
on-keys-pressed="{{ keyHandler }}"></core-a11y-keys>
<!-- NAV -->
<core-menu selected="{{ route }}" valueattr="data-category" on-core-select="{{ menuItemSelected }}">
<core-submenu data-category="home" label="HOME">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
<core-submenu data-category="pricing" label="PRICING">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
<core-submenu data-category="contact" label="CONTACT">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
</core-menu>
<!-- PAGES -->
<div class="container">
<core-animated-pages id="pages" transitions="slide-from-right" selected="{{ route }}" valueattr="data-category">
<section data-category="home" layout vertical center-center>
<core-ajax id="ajax-home"
url="//winkstrategies.com/impactory-api/wp-json/posts?type=home-contents"
handleAs="json"
response="{{ homeContents }}">
</core-ajax>
<p>HOME</p>
<home-page contents="{{ homeContents }}"></home-page>
</section>
<section data-category="pricing" layout vertical center-center>
<core-ajax id="ajax-pricing"
url="//winkstrategies.com/impactory-api/wp-json/posts?type=pricing-contents"
handleAs="json"
response="{{ pricingContents }}">
</core-ajax>
<p>PRICING</p>
<pricing-page contents="{{ pricingContents }}"></pricing-page>
</section>
<section data-category="contact" layout vertical center-center>
<core-ajax id="ajax-contact"
url="//winkstrategies.com/impactory-api/wp-json/posts?type=contact-contents"
handleAs="json"
response="{{ contactContents }}"
on-core-complete="{{ logContents }}">
</core-ajax>
<p>CONTACT</p>
<contact-page contents="{{ contactContents }}"></contact-page>
</section>
</core-animated-pages>
</div>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
app/scripts/app.JS:
(function () {
'use strict';
document.addEventListener('polymer-ready', function () {
console.log('Polymer is ready to rock!');
localStorage.clear(); // clear loaded pages status
});
// bindings
var app = document.querySelector('template[is="auto-binding"]'),
DEFAULT_ROUTE = 'home';
app.pages = [ 'HOME', 'PRICING', 'CONTACT' ];
app.addEventListener( 'template-bound', function(e) {
// query selectors
var pages = document.querySelector( '#pages' ),
keys = document.querySelector( '#keys' ),
// Allow selecting pages by num keypad.
keysToAdd = Array.apply( null, app.pages ).map( function(x, i) {
return i + 1;
}).reduce( function(x, y) {
return x + ' ' + y;
});
keys.keys += ' ' + keysToAdd;
this.route = this.route || DEFAULT_ROUTE; // Select initial route.
});
// key handler
app.keyHandler = function(e, detail) {
// Select pages by num key or arrows.
var num = parseInt( detail.key );
if ( !isNaN( num ) && num <= this.pages.length ) {
pages.selectIndex( num - 1 );
return;
}
switch ( detail.key ) {
case 'left':
case 'up':
pages.selectPrevious();
break;
case 'right':
case 'down':
pages.selectNext();
break;
}
};
// selected page events
app.menuItemSelected = function(e, detail, sender) {
if (detail.isSelected) {
// dynamic core-ajax firing
var selectedCategory = detail.item.dataset.category,
selectedAjax = selectedCategory;
selectedAjax = document.querySelector( '#ajax-' + selectedAjax );
// load content only once
if ( !localStorage.getItem( selectedCategory ) ) {
localStorage.setItem( selectedCategory, true );
selectedAjax.go();
}
}
};
app.logContents = function(e, detail, sender) {
console.log(this.contactContents);
};
})();
核心子菜单etl-al已被弃用，可以使用纸质菜单等。子菜单路由可以以类似的方式解决，而不考虑使用的路由器（即熨斗控制器、多余路由器等）
纸张子菜单路由目前有局限性：
- https://github.com/PolymerElements/paper-menu/issues/42
- 纸张菜单内的Polymer 1.0纸张子菜单
一种解决方法是通过点击处理程序（从上面链接中的相关答案复制）以编程方式管理菜单/子菜单的状态：
<dom-module id="menu-nav">
<template>
<!-- define route for 'view', e.g. /:view -->
<!-- define route for 'subview', e.g. /bar/:subview -->
<paper-menu selected="{{view}}" attr-for-selected="name">
<paper-item name="foo" on-tap="_onFoo">
Foo
</paper-item>
<paper-submenu opened="{{_isSubmenu(view, _inSubmenu)}}">
<paper-item on-tap="_onSubmenu" class="menu-trigger">
Bar
</paper-item>
<paper-menu selected="{{subview}}" attr-for-selected="subname" class="menu-content">
<paper-item subname="baz" on-tap="{{_onBar}}">
Baz
</paper-item>
<paper-menu>
</paper-submenu>
<paper-menu>
</template>
<script>
Polymer({
is: "menu-nav",
properties: {
view: {
type: String,
value: "foo"
},
_inSubmenu: {
type: Boolean,
value: false
}
},
_isSubmenu: function (view, _inSubmenu) {
return _inSubmenu || view === 'bar';
},
_onFoo: function () {
this.set('_inSubmenu', false);
// ... transition to next route, this could depend on the router being used
// for eample, with Excess router, this would be:
// Excess.RouteManager.transitionTo('/foo');
},
_onBar: function () {
this.set('_inSubmenu', true);
this.set('subview', undefined);
// ... transition to /bar/baz
},
_onSubmenu: function (e) {
e.stopPropagation();
this._onBar();
},
});
</script>
</dom-module>