使用聚合物核心页，根据url #片段选择正确的页面

Using polymer core-pages, select correct page based on url #fragment

本文关键字：片段 选择 url 聚合物 核心 根据      更新时间：2023-09-26

我有一个聚合物应用程序，它使用核心页面和核心菜单。这是一个最小的工作示例:

<!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属性为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确实发生变化时才会调用。但在更一般的情况下，你可能需要在这里做更多的检查，以防止不必要的更新。

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

只是一个建议，因为我不是这方面的专家。输入一些id(或找到另一种获取div的方法)和:

if (window.location.href.slice(-3) == "bar")
{
   swap(idOne,idTwo);
}
else
{
   swap(idTwo,idOne);
}
function swap(one, two) {
    document.getElementById(one).style.display = 'block';
    document.getElementById(two).style.display = 'none';
}
相关文章：