铁页:页面更改事件

Question

铁页:页面更改事件

是否有任何事件可以在页面更改时由Web组件捕获,甚至是生命周期回调？

我尝试使用附加的回调但它不再被触发..

Answer 1

从父元素中<iron-pages>,您可以观察到更改<iron-pages>.selected以监视页面索引/名称:

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-pages id="pages" selected="{{selected}}">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </iron-pages>
      <paper-button on-tap="_prev">Prev</paper-button>
      <paper-button on-tap="_next">Next</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties : {
            selected: {
              type: Number,
              value: 0,
              observer: '_selectedChanged'
            }
          },
          _selectedChanged: function(newPage, oldPage) {
            console.log('<iron-pages>.selected', 'new', newPage, 'old', oldPage);
          },
          _prev: function() {
            this.$.pages.selectPrevious();
          },
          _next: function() {
            this.$.pages.selectNext();
          }
        });
      });
    </script>
  </dom-module>
</body>

Run Code Online (Sandbox Code Playgroud)

^codepen

或者,您可以为和事件设置事件侦听器,以便查看选定和取消选择的元素.<iron-pages>.iron-select<iron-pages>.iron-deselect

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-pages id="pages" selected="0"
                  on-iron-select="_pageSelected"
                  on-iron-deselect="_pageDeselected">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </iron-pages>
      <paper-button on-tap="_prev">Prev</paper-button>
      <paper-button on-tap="_next">Next</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          _pageSelected: function(e) {
            var page = e.detail.item;
            console.log('page selected', page);
          },
          _pageDeselected: function(e) {
            var page = e.detail.item;
            console.log('page deselected', page);
          },
          _prev: function() {
            this.$.pages.selectPrevious();
          },
          _next: function() {
            this.$.pages.selectNext();
          }
        });
      });
    </script>
  </dom-module>
</body>

Run Code Online (Sandbox Code Playgroud)

^codepen

或者您可以进行配置,<iron-pages>.selectedAttribute以便在新页面和先前选择的页面上设置属性,您可以在页面内部进行观察.当页面选择改变时,先前选择的页面的属性设置为false,并且新选择为true.

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-pages id="pages" selected="0" selected-attribute="selected">
        <x-page data-name="p1">One</x-page>
        <x-page data-name="p2">Two</x-page>
        <x-page data-name="p3">Three</x-page>
      </iron-pages>
      <paper-button on-tap="_prev">Prev</paper-button>
      <paper-button on-tap="_next">Next</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          _prev: function() {
            this.$.pages.selectPrevious();
          },
          _next: function() {
            this.$.pages.selectNext();
          }
        });
      });
    </script>
  </dom-module>
  
  <dom-module id="x-page">
    <template>
      <content id="content"></content>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-page',
          properties: {
            selected: {
              type: Boolean,
              value: false,
              observer: '_selectedChanged'
            }
          },
          _selectedChanged: function(selected) {
            console.log('<x-page>.sel', this.dataset.name, selected);
          }
        });
      });
    </script>
  </dom-module>
</body>

Run Code Online (Sandbox Code Playgroud)

^codepen

归档时间：	9 年，1 月前
查看次数：	2256 次
最近记录：	8 年，3 月前