Question

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

在jsbin中执行以下操作

点击＆＃39;切换＆＃39;
点击＆＃39;切换步骤＆＃39;
点击＆＃39;切换＆＃39;
点击＆＃39;切换＆＃39;再次

我希望看到＆＃39; step a＆＃39;。正如x-example指定＆＃39; step =＆＃34; a＆＃34;＆＃39;。但是，我看到了步骤b＆＃39;。有没有办法显示＆＃39;步骤a＆＃39;什么时候显示y-example？

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

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

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

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

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

1 个答案: