如何在另一页中使用 Polymer 2.0 中一页的数据

Question

我有一个 html 文件，它进行休息调用并获取数组中的数据。我怎样才能使用这个另一个文件。我希望能够访问和操作数据并在单击下一步按钮时打印数组中的每个元素。 my-assessment.html 包含加载的数据，my-quiz.html 应包含下一个和上一个按钮以循环遍历数据。

我的-assessment.html

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer-simple-slider/simple-slider.html">
<link rel="import" href="../bower_components/promise-polyfill/promise-polyfill-lite.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">



<dom-module id="my-assessment">
    <template>          
        <button on-click="getAssessment">Load Assessment</button>

        <!--Check the url is correct ! And last responce property should be {{}} instead [[]] (as up way data binding) -->
        <iron-ajax
            id="requestRepos"
            url="http://192.168.178.31:8080/demo/assessment" 
            handle-as="json"
            last-response="{{repos}}"
        </iron-ajax>

    </template>
    <script>
        class Assessment extends Polymer.Element {
            static get is() { return 'my-assessment'; }
            static get properties() {
                return {
                    repos: {
                        type : Array,
                        observer : 'isQuestionsLoaded'
                    }
                }
            }
            // set this element's employees property
            constructor() {
                super();
            }

            isQuestionsLoaded(q) {
                if (q) {
                  console.log('loaded questions', q); // questions are loaded.
                 }
                 this.questions = q;
            }

            getAssessment() {
                this.$.requestRepos.generateRequest();
            }    
        }
        window.customElements.define(Assessment.is, Assessment);
    </script>
</dom-module>

我的-quiz.html

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer-simple-slider/simple-slider.html">
<link rel="import" href="../bower_components/promise-polyfill/promise-polyfill-lite.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="my-assessment.html">



<dom-module id="my-quiz">
    <template>          

        <my-assessment>
        </my-assessment>
    </template>
    <script>
        class Quiz extends Polymer.Element {
            static get is() { return 'my-quiz'; }
            static get properties() {
                return {
                    index: {
                        type: Number,
                        value: 0
                    } 
                }
            }
            // set this element's employees property
            constructor() {
                super();
            }


        }
        window.customElements.define(Quiz.is, Quiz);
    </script>
</dom-module>

Answer 1

在您上面显示的情况下，两个元素彼此具有子父关系。元素 my-quiz 包含元素 my-assessment。从它的子元素向上传递数据可以通过两种方式的数据绑定来完成。因此，您必须将 notify:true 添加到您的存储库属性并使用我的示例中所示的双向数据绑定语法。

子元素属性：

 static get properties() {
      return {
           repos: {
              type : Array,
              notify: true,
              observer : 'isQuestionsLoaded'
           }
       }
  }

父元素：

<dom-module id="my-quiz">
  <template>          
      <my-assessment repo-data="{{repos}}"></my-assessment>
  </template>
  <script>
    class Quiz extends Polymer.Element {
        static get is() { return 'my-quiz'; }
        static get properties() {
            return {
                repoData: {
                    type: Array,
                    observer: '_dataChanged'
                } 
            }
         }

        constructor() {
            super();
        }
        _dataChanged(data) {
           console.log('Data changed:', data)
        }
    }
    window.customElements.define(Quiz.is, Quiz);
  </script>
</dom-module>

如您所见，我使用了两种数据绑定语法 {{}} 来获取从您的子元素发送的数据。更改将被观察并记录在控制台中。

要了解更多相关信息，您可以查看 Polymer documentation

如何在另一页中使用 Polymer 2.0 中一页的数据

how to use data from one page in polymer 2.0 in another

polymer