Polymer jsBin中的聚合物应用程序路线示例_Polymer

Polymer jsBin中的聚合物应用程序路线示例

polymer

Polymer jsBin中的聚合物应用程序路线示例,polymer,Polymer,有人能用jsBin演示一下如何使用approute 聚合物 A页提交 //注意：如果我们在单独的文件中声明此元素并导入它，则不需要。 addEventListener（'WebComponentsReady'，函数（）{ 聚合物({ 是‘x-a’，特性：{ 电邮：{ 类型：字符串 } }, _提交：函数（）{ 此.fire（'info-updated'{ 电子邮件：this.email，电话：这个电话 }); } }); }); B页电子邮件：[[userInfo.email]] //

有人能用jsBin演示一下如何使用

approute


聚合物
A页
提交
//注意：如果我们在单独的文件中声明此元素并导入它，则不需要。
addEventListener（'WebComponentsReady'，函数（）{
聚合物({
是‘x-a’，
特性：{
电邮：{
类型：字符串
}
},
_提交：函数（）{
此.fire（'info-updated'{
电子邮件：this.email，
电话：这个电话
});
}
});
});
B页
电子邮件：[[userInfo.email]]
//注意：如果我们在单独的文件中声明此元素并导入它，则不需要。
addEventListener（'WebComponentsReady'，函数（）{
聚合物({
是‘x-b’，
特性：{
电邮：{
类型：字符串
}
}
});
});
//注意：如果我们在单独的文件中声明此元素并导入它，则不需要。
addEventListener（'WebComponentsReady'，函数（）{
聚合物({
是：“x-shell”，
特性：{
用户信息：{
类型：对象，
值：函数（）{
返回{}；
}
},
第页：{
类型：字符串，
reflectToAttribute:真
}
},
_updateInfo:函数（事件）{
console.log（'infoUpdated'，event.detail）；
此.set（'userInfo'，event.detail'）；
}
});
});

这是您的工作示例，请检查它


聚合物
A页
提交
//注意：如果我们在单独的文件中声明此元素并导入它，则不需要。
addEventListener（'WebComponentsReady'，函数（）{
聚合物({
是‘x-a’，
特性：{
电邮：{
类型：字符串
}
},
_提交：函数（）{
此.fire（'info-updated'{
电子邮件：this.email，
电话：这个电话
});
}
});
});
B页
电子邮件：[[userInfo.email]]
//注意：如果我们在单独的文件中声明此元素并导入它，则不需要。
addEventListener（'WebComponentsReady'，函数（）{
聚合物({
是‘x-b’，
特性：{
用户信息：{
类型：对象
}
}
});
});
//注意：如果我们在单独的文件中声明此元素并导入它，则不需要。
addEventListener（'WebComponentsReady'，函数（）{
聚合物({
是：“x-shell”，
特性：{
用户信息：{
类型：对象，
值：函数（）{
返回{}；
}
},
第页：{
类型：字符串，
reflectToAttribute:真
}
},
_updateInfo:函数（事件）{
console.log（'infoUpdated'，event.detail）；
此.set（'userInfo'，event.detail'）；
}
});
});

我强烈建议查看聚合物商店应用程序。他们使用应用程序路线，你可以玩它

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <title>Polymer</title>

  <script src="https://polygit.org/app-route+polymerelements+*/components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/polymer/polymer.html">
  <link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-input/paper-input.html">
  <link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-button/paper-button.html">
  <link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-route.html">
  <link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-location.html">
  <link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/iron-pages/iron-pages.html">

</head>
<body>

  <x-shell></x-shell>

    <dom-module id="x-a">
    <template>
      <h2>page A</h2>
      <paper-input value="{{email}}" placeholder="set email"></paper-input>
      <paper-input value="{{phone}}" placeholder="set phone"></paper-input>
      <paper-button on-click="_submit">submit</paper-button>
    </template>
    <script>
      // NOTE: not needed if we declare this element in a separate file and import it.
      addEventListener('WebComponentsReady', function() {

        Polymer({
          is: 'x-a',
          properties: {
            email: {
              type: String
            }
          },
          _submit: function() {
            this.fire('info-updated', {
              email: this.email,
              phone: this.phone
            });
          }
        });

      });
    </script>
  </dom-module>



  <dom-module id="x-b"> 
    <template>
      <h2>page B</h2>
      <div>
        email: [[userInfo.email]]
      </div>
    </template>
    <script>
      // NOTE: not needed if we declare this element in a separate file and import it.
      addEventListener('WebComponentsReady', function() {

        Polymer({
          is: 'x-b',
          properties: {
            email: {
              type: String
            }
          }
        });

      });
    </script>
  </dom-module>

  <dom-module id="x-shell">
    <template>
          <app-location route="{{route}}" use-hash-as-path></app-location>
          <app-route
            route="{{route}}"
            pattern="/:page"
            data="{{routeData}}"
            tail="{{subroute}}"></app-route>
      <iron-selector selected="{{routeData.page}}" attr-for-selected="name" role="navigation">
          <a name="x-a" href="#/x-a">x-a</a>
          <a name="x-b" href="#/x-b">x-b</a>
      </iron-selector>
      <iron-pages selected="[[routeData.page]]" attr-for-selected="name">
        <x-a name="x-a" route="{{route}}" user-info="[[userInfo]]" on-info-updated="_updateInfo"></x-a>
        <x-b name="x-b" route="{{route}}" user-info="[[userInfo]]"></x-b>
      </iron-pages>
    </template>
    <script>
      // NOTE: not needed if we declare this element in a separate file and import it.
      addEventListener('WebComponentsReady', function() {

        Polymer({
          is: 'x-shell',
          properties: {
            userInfo: {
              type: Object,
              value: function() { 
                return {};
              }
            },
            page: {
              type: String,
              reflectToAttribute: true
            }
          },

          _updateInfo: function(event) {
            console.log('infoUpdated', event.detail);
            this.set('userInfo', event.detail);
          }
        });

      });
    </script>
  </dom-module>



</body>
</html>