Question

任何人都可以使用jsBin显示如何使用app-route的示例吗？

https://jsbin.com/retokid/edit?html,output

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

Answer 1

这是你的工作范例，请检查一下。

<!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 is="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-tap="_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 is="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: {
            userInfo: {
              type: Object
            }
          }
        });

      });
    </script>
  </dom-module>
  
  <dom-module is="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>

jsBin中的Polymer App-Route示例

1 个答案: