Question

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

<!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>？

Answer 1

您可能需要查看带有路由的单页应用的Polymer演示。它使用flatiron-director组件进行哈希路由。这是demo，这是source code。

我正在编写自己的路由器组件，如果你想在带有参数的深层路由上进行模式匹配并独立更新页面的不同部分（并且还需要一个漂亮而灵活的路由配置），事情会很快变得非常复杂

但基本功能非常简单。给每个元素一个与哈希匹配的id是一个很好的起点。您可以使用valueattr属性为id值而不是页面索引选择另一个属性（selected）（另一个选项是坚持使用页面索引并定义哈希映射-routes到页面索引）。以下是您的方案的完整示例：

<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处理程序。但在更一般的情况下，您可能需要在此处进行更多检查以防止不必要的更新。

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

Answer 2

只是一个建议，因为我不是那方面的专家。放一些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';
}

使用聚合物核心页面，根据URL #fragment选择正确的页面

2 个答案: