Инициализировать элемент при выборе с помощью железных страниц

Я хотел бы инициализировать элемент всякий раз, когда он отображается с использованием железных страниц.

В jsbin выполните следующую операцию

  1. Нажмите "Переключить".
  2. Нажмите "Переключить шаг".
  3. Нажмите "Переключить".
  4. Снова нажмите "Переключить".

Я ожидаю увидеть «шаг а». В x-примере назначается 'step = "a"'. Однако я вижу «шаг б». Есть ли способ показать «шаг a» всякий раз, когда показан y-пример?

jsbin: http://jsbin.com/regapemoqe/1/edit?html,output

Код:

  <meta charset="utf-8">

  <base href="http://polymer-magic-server.appspot.com/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>

  <link href="polymer/polymer.html" rel="import">
  <link href="iron-pages/iron-pages.html" rel="import">


  <style>
    body {
      font-family: sans-serif;
    }
  </style>

</head>
<body>

<x-example></x-example>

<dom-module id="x-example">
  <style>
    :host {
      display: block;
    }


  </style>
  <template>

    <button on-click="toggleSelection">Toggle</button>
    <iron-pages
         attr-for-selected="data-route"
         selected=[[selected]]>
      <section data-route="one">
        <p>This is the one</p>
      </section>
      <section data-route="two">
        <p>This is the other one</p>
        <y-example
            step="a"></y-example>
      </section>


    </iron-pages>

  </template>
  <script>

    // only need this when both (1) in the main document and (2) on non-Chrome browsers
    addEventListener('WebComponentsReady', function() {

      Polymer({
        is: "x-example",
        properties: {
          selected: {
            type: String,
            value: 'one'
          }
        },
        toggleSelection: function() {
          this.selected = (this.selected == 'one')?'two':'one';
        }
      });
    });

  </script>
</dom-module>

<dom-module id="y-example">
  <style>
    :host {
      display: block;
    }
  </style>

  <template> 
    <iron-pages
          attr-for-selected="data-step"
          selected="[[step]]">
      <section data-step="a"><p>This is step a</p></section>
      <section data-step="b"><p>This is step b</p></section>      
    </iron-pages>
    <button on-click="toggleStep">Toggle step</button>
  </template>
  <script>
    addEventListener('WebComponentsReady', function() {
      Polymer({
        is: "y-example",
        properties: {
          step: {
            type: String,
            value: 'a'
          }
        },
        toggleStep: function() {
          this.step = (this.step == 'a')?'b':'a'
        }
      });
    });
  </script>
</dom-module>

</body>

polymer polymer-1.0
person Srik    schedule 01.10.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете сделать что-то вроде этого в своей toggleSelection функции вашего x-example элемента:

toggleSelection: function() {
   this.$$('y-example').step='a';
   this.selected = (this.selected == 'one')?'two':'one';
}

См. Здесь: http://jsbin.com/tewaqa/edit?html,output

person Ümit    schedule 02.10.2015