gpt4 book ai didi

javascript - 使用 polymer 核心页面,根据 url #fragment 选择正确的页面

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:24:12 24 4
gpt4 key购买 nike

我有一个 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散列路由组件。这是 demo ,这里是 source code .

我目前正在编写我自己的路由器组件,如果您想使用参数在深层路由上进行模式匹配并独立更新页面的不同部分(并且还需要一个漂亮灵活的路由配置),事情很快就会变得非常复杂.

但基本功能非常简单。给每个元素一个与散列匹配的 id 是一个很好的起点。您可以使用 valueattr 属性为 selected 值选择另一个属性 (id) 而不是页面索引(另一个选项是坚持使用页面索引并定义从哈希路由到页面索引的映射)。以下是您的场景的完整示例:

<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 确实发生时被调用变了。但在更一般的情况下,您可能需要在此处进行更多检查以防止不需要的更新。

缺少的是检查用户是否输入了无效路由。在这种情况下,根本不会显示任何页面,但您可能希望改为重定向到默认页面。

关于javascript - 使用 polymer 核心页面,根据 url #fragment 选择正确的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25409037/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com