Polymer > 显示不存在的 Neon-Animated-Pages 的 404

Question

如果您 select 一个不存在的索引，我无法让霓虹灯动画页面触发 'iron-select'。

实际上，如果我不将侦听器的范围限定在元素上，我就可以做到。例如，这会捕获事件：

listeners: {
    'iron-select':'_listIronSelect'
}

但这不是

listeners: {
    'pages.iron-select':'_lisIronSelect'
}

让我明确一点，只要您 select 存在一个霓虹灯动画页面子项，范围侦听器就可以工作。当然，我必须确定该侦听器的范围，因为我的代码还有其他铁-select 被解雇了。

如果您想知道我为什么需要这个，那是因为我 select 基于 url 的霓虹灯动画页面。这就是我进行路由的方式，所以我需要它，这样我就可以在需要时显示 404。

编辑 ******

这是一个 jsfiddle

https://jsfiddle.net/3kzssc85/

Answer 1

当找不到 selected 页面时，您可以使用 <neon-animated-pages>.fallbackSelection 回退到 404 页面：

<neon-animated-pages selected="[[page]]"
                     fallback-selection="404"
                     attr-for-selected="data-name">
  <neon-animatable data-name="one">apple</neon-animatable>
  <neon-animatable data-name="404">Page not found...</neon-animatable>
</neon-animated-pages>

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="neon-animated-pages/neon-animated-pages.html">
  <link rel="import" href="neon-animated-pages/neon-animatable.html">
  <link rel="import" href="neon-animated-pages/neon-animations.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <paper-input label="Enter 'one', 'two', or 'three'" value="{{page}}"></paper-input>
      <neon-animated-pages selected="[[page]]"
                           fallback-selection="404"
                           entry-animation="fade-in-animation"
                           exit-animation="fade-out-animation"
                           attr-for-selected="data-name">
        <neon-animatable data-name="one">apple</neon-animatable>
        <neon-animatable data-name="two">orange</neon-animatable>
        <neon-animatable data-name="three">banana</neon-animatable>
        <neon-animatable data-name="404">Page not found...</neon-animatable>
      </neon-animated-pages>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties : {
            page: {
              type: String,
              value: 'one'
            }
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

Polymer > 显示不存在的 Neon-Animated-Pages 的 404

Polymer > show a 404 for a non existent Neon-Animated-Pages

javascript

listener

polymer

polymer-1.0