Jer*_*rub 4 javascript polymer
我有一个聚合物应用程序,它使用核心页面和核心菜单.这是一个最小的工作示例:
<!doctype html>
<html> <head>
<script src="/bower_components/platform/platform.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-menu/core-menu.html">
<link rel="import" href="/bower_components/core-item/core-item.html">
<link rel="import" href="/bower_components/core-pages/core-pages.html">
</head>
<body unresolved>
<template is="auto-binding">
<core-menu selected="0" selectedIndex="{{selected}}">
<core-item label="Item 1"><a href="#foo" target="_self"></a></core-item>
<core-item label="Item 2"><a href="#bar" target="_self"></a></core-item>
</core-menu>
<core-pages selected="{{selected}}">
<div>one</div>
<div>two</div>
</core-pages>
</template>
我如何制作它,以便如果我超链接到/example.html#bar,<div>two</div>将显示而不是<div>one</div>？
您可能希望查看带有路由的单页面应用程序的Polymer演示.它使用flatiron-director组件进行散列路由.这是演示,这是源代码.
我目前正在编写自己的路由器组件,如果你想在带有参数的深度路由上进行模式匹配并独立更新页面的不同部分(并且还需要一个漂亮而灵活的路由配置),事情会很快变得非常复杂.
但基本功能非常简单.给每个元素一个与哈希匹配的id是一个很好的起点.您可以使用该valueattr属性id为selected值而不是页面索引选择另一个属性()(另一个选项是坚持使用页面索引并定义从哈希路由到页面索引的映射).以下是您的方案的完整示例:
<polymer-element name="my-app">
<template>
<core-menu selected="{{selected}}" valueattr="id">
<core-item id="foo" label="Item 1"></core-item>
<core-item id="bar" label="Item 2"></core-item>
</core-menu>
<core-pages selected="{{selected}}" valueattr="id">
<div id="foo">one</div>
<div id="bar">two</div>
</core-pages>
</template>
<script>
Polymer('my-app', {
ready: function() {
window.onhashchange = function() {
var page = window.location.hash.substring(1);
this.selected = page;
}.bind(this);
this.selected = 'foo';
},
selectedChanged: function() {
window.location.hash = this.selected;
}
});
</script>
</polymer-element>
<my-app></my-app>
我会在所选页面更改时设置位置哈希.该onhashchange处理器无论何时更新哈希值发生变化所选择的页面(基本上是回答你的问题,因为当用户进入一个新的哈希(直接或通过单击链接),这将更新当前可见的页面.)
以编程方式设置哈希也会调用onhashchange处理程序,但这不是问题,因为selectedChanged只有selected在确实已更改的情况下才会调用处理程序.但在更一般的情况下,您可能需要在此处执行更多检查以防止不必要的更新.
缺少的是检查用户是否输入了无效路线.在这种情况下,根本不显示任何页面,但您可能希望重定向到默认页面.