Question

在索引的头部，我有：

  // hashbang is set to true in routing.html
  <script type="text/javascript">
   if (window.location.href === "/users") {
    console.log('Hey you!');
   }
  </script>

我需要实现一些基于window.location的类绑定，但我正在测试以确保它在聚合物中起作用。可以？我不适合我。当我去localhost:3000/#!/users时，注意到在控制台中。

Answer 1

<强>更新

如果您将page.js与Polymer入门套件一起使用，则应用程序的所有页面都会在第一次加载时加载。

在此入门套件中，使用Page.js更改路线将显示需要页面并添加display: none以隐藏其他页面。

例如，在您的app/index.html中，您应该拥有以下内容：

<iron-pages attr-for-selected="data-route" selected="{{route}}">
...
  <section data-route="home">
      ...
  </section>


  <section data-route="users">
    ...
  </section>

  <section data-route="user-info">
    ...
  </section>
...
</iron-pages>

route元素上的iron-pages参数由app/elements/routing.html中的Page.js设置：

page('/', function () {
  app.route = 'home';
});

page('/users', function () {
  app.route = 'users';
});

page('/users/:name', function (data) {
  app.route = 'user-info';
  app.params = data.params;
});

page('/contact', function () {
  app.route = 'contact';
});

因此，如果路线与/users匹配，那么Page.js将设置app.route = 'users';，并且铁页面Polymer元素将显示带有data-route="users"的部分并隐藏其他部分没有重新加载任何东西，因此没有重新加载你的脚本。

但实际上，因为您正在使用Page.js，所以更容易将您的代码集成到routing.html文件中，如下所示：

page('/users', function () {
  app.route = 'users';
  console.log('Hey you!');
});

page('/users/:name', function (data) {
  app.route = 'user-info';
  app.params = data.params;
  console.log('Hey ' + data.params.name);
});

page('/contact', function () {
  app.route = 'contact';
  console.log('Contact page');
});

您可以从尝试调试开始，例如，尝试记录窗口href：

console.log(window.location.href);

应返回：

http://localhost:3000/#!/users

然后，您可以更深入地了解您的问题！ ;）

确实，window.location.href为您提供了完整的网址，而且应该这样做（使用Polymer或不使用Polymer）。

另一方面，window.location.hash会从#字符开始返回网址中的所有内容，为您提供#!/users，因此您可以尝试：

<script type="text/javascript">
// Slice(2) to get rid of '#!'
if (window.location.hash.slice(2) === "/users") {
  console.log('Hey you!');
}
</script>

旁注：

如果您在#之后有查询参数，请执行以下操作：
localhost:3000/#!/users?number=42&name=value

window.location.href将成为#!/users?number=42&name=value

如果你想在这种情况下摆脱查询参数?number=42&name=value，你可以写：

<script type="text/javascript">
   if (window.location.hash.slice(2).split("?")[0] === "/users") {
    console.log('Hey you!');
   }
</script>

在Polymer 1.1中使用window.location.href的正确方法

1 个答案: