Search code examples
polymerpolymer-1.0

Initialize element when selected using iron-pages

I would like to initialize an element whenever it is rendered using iron pages.

In the jsbin do the below operation

  1. Click 'Toggle'
  2. Click 'Toggle step'
  3. Click 'Toggle'
  4. Click 'Toggle' again

I expect to see 'step a'. As the x-example assigns 'step="a"'. However I see 'step b'. Is there any way to show 'step a' whenever y-example is shown?

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

Code: 

  <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>
Solution

  • You could do something like this in your toggleSelection function of your x-example element:

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

    See here: http://jsbin.com/tewaqa/edit?html,output