「ペーパータブ」がクリックされるまでページが表示されない

Question

ペーパータブをクリックするまでスワイプページが表示されません。

私は（これが正しいかどうかわからない）私はそれがPolymer({ is: ...スクリプト内で動作するようにしようとしている,,,

を

をtemplate[is="dom-bind"]方法を使用していないと、ここに私がきたものです今だ：

<!-- 
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
     Forms (page) 
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: --> 
    <link rel="import" href="../../bower_components/polymer/polymer.html"> 
    <link rel="import" href="../../bower_components/iron-swipeable-pages/iron-swipeable-pages.html"> 

    <link rel="import" href="../components/component-page.html"> 
    <link rel="import" href="forms-contact.html"> 
    <!-- <link rel="import" href="forms-rebuild.html"> --> 


    <dom-module id="page-forms"> 
    <template> 

     <style> 
     :host { 
      display: block; 
      width: 100%; 
      height: 100%; 
      box-sizing: border-box; 
      background: #fff; 
     } 

     iron-swipeable-pages { z-index: 1; } 
     iron-swipeable-pages > * { 
      padding: 2rem; 
      -webkit-user-select: none; /* Chrome all/Safari all */ 
      -moz-user-select: none;  /* Firefox all */ 
      -ms-user-select: none;  /* IE 10+ */ 
      user-select: none;   /* Likely future */ 
      cursor: default; 
     } 
     forms-contact { } 
     .page { height: 100%; } 

     </style> 


    <!-- Content 
    ----------------------------------------------------------------------------------------------------------------> 
     <component-page grid="vertical" layout="start-center" padding-t="20" min-height="1"> 

      <!-- Select Menu --> 
      <paper-tabs selected="{{selectedForm}}" mobile-width=".9" 
                tablet-width=".75" 
                desktop-width=".5"> 
         <paper-tab> 
          <iron-icon icon="communication:forum"></iron-icon> 
          Contact Form 
         </paper-tab> 

         <paper-tab> 
          <iron-icon icon="icons:settings"></iron-icon> 
          Rebuild Form 
         </paper-tab> 
      </paper-tabs> 


      <iron-swipeable-pages on-selected-changed="_onSelectedChanged" selected="{{selectedForm}}" flex="auto" width="100" show-arrow> 

         <!-- Contact Form --> 
         <div class="page" grid="vertical" layout="start-center"> 
          <forms-contact mobile-width=".9" tablet-width=".75" desktop-width=".5"></forms-contact> 
         </div> 

         <!-- Contact Form --> 
         <div class="page" grid="vertical" layout="start-center"> 
          <forms-contact mobile-width=".9" tablet-width=".75" desktop-width=".5"></forms-contact> 
         </div> 
      </iron-swipeable-pages> 

      <fx-skew bg="white"></fx-skew> 
     </component-page> 
    <!-- Content 
    ----------------------------------------------------------------------------------------------------------------> 

    </template> 



    <script> 

     Polymer({ 
      is: "page-forms", 

      selectedForm: { 
        value: 0 
        }, 

      _onSelectedChanged: function(e) { 

       var target = e.target; 
       target.isGesture ? console.log("Swiped by Gesture!") : console.log("Swiped by Selection!"); 
      } 

     }); 

    </script> 
    </dom-module> 

Answer 1

あなたは{value: 0}の値を持つ属性としてではなく、プロパティとして直接selectedFormを指定している：

 Polymer({ 
      is: "page-forms", 
      properties: { 
       selectedForm: {type: Number, value: 0}, 
      }, 
     }); 

Cf. Polymer: Declared Properties