使用铁页选择时初始化元素

Question

我想在使用铁页呈现时初始化一个元素。

在jsbin中做如下操作

点击'Toggle'
点击'Toggle step'
点击'Toggle'
再次点击'Toggle'

我希望看到 'step a'。作为 x 示例分配 'step="a"'。但是我看到 'step b'。每当显示 y-example 时，有什么方法可以显示 'step a' 吗？

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>

Answer 1

您可以在 x-example 元素的 toggleSelection 函数中执行类似的操作：

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

看这里：http://jsbin.com/tewaqa/edit?html,output

使用铁页选择时初始化元素

Initialize element when selected using iron-pages

polymer

polymer-1.0