Question

如果您选择不存在的索引，我无法让霓虹动画页面触发“铁选”。

实际上，如果我没有将侦听器作用于元素，我就可以这样做。例如，这会捕获事件：

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

但这不是

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

让我明确一下，只要您选择存在的霓虹动画页面子项，范围内的侦听器就会起作用。当然，我必须扩大听众范围，因为我的代码还有其他铁选择被解雇了。

如果您想知道我为什么需要这个，那是因为我根据网址选择了霓虹动画页面。这就是我如何做路由所以我需要这个，所以如果需要我可以显示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

<聚合物>显示404不存在的Neon-Animated-Pages

1 个答案: