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

我想初始化一个元素，每当它使用铁页。

在jsbin中执行以下操作

点击"切换"
点击"切换步骤"
点击"切换"
再次点击"切换"

我希望看到'步骤a'。正如x-示例分配的'step= ' a ' '。但是我看到了"步骤b"。是否有任何方法来显示'步骤a'每当y-例子显示?

jsbin: http://jsbin.com/regapemoqe/1/edit?html输出

代码:

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

您可以在x-example元素的toggleSelection函数中这样做:

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

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

相关内容

最新更新

热门标签：