Question

我使用iron-ajax发出get请求并将问题列表作为响应并将其设置在变量中。我怎么能在另一个文件中使用它。如下所示，handleResponse将响应存储在数组中。我需要在另一个html文件中使用它

那么我应该在custom-element.html中导入assessment.html，然后使用custom-element中的问题来执行我的操作？

get-assessment.html（聚合物自定义元素应该是min 2 name和hypen之间。）

<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-quiz.html">


<dom-module id="get-assessment">
    <template>          
        <button on-click="getAssessment">Load Assessment</button>
        <button on-click="prev">Previous</button>
        <button on-click="next">Next</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>

        <my-quiz repos= "[[repos]]"></my-quiz>

    </template>
    <script>
        class Assessment extends Polymer.Element {
            static get is() { return 'get-assessment'; }
            static get observers() {return [ 'checkRepos(repos)']}

            checkRepos(r) {
                console.log(r); //to see iron-ajax result.
            }

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

MY-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">





<dom-module id="my-quiz">
    <template>          
        <button on-click="getAssessment">Load Assessment</button>
        <button on-click="prev">Previous</button>
        <button on-click="next">Next</button>


        <div>Employee ID: [[_calculateId(index)]] Name: [[_calculateName(index)]]</div>
    </template>
    <script>
        class Quiz extends Polymer.Element {
            static get is() { return 'my-quiz'; }
            static get properties() {
                return {
                    index: {
                        type: Number,
                        value: 0
                    },
                    repos: {
                        type : Array,
                        observer : 'isQuestionsLoaded'
                    }   
                }
            }
            _calculateName(i) { 
                return this.repos[i].assessmentId; 
            }
            _calculateId (i) { 
                return this.repos[i].questionText; 
            }
            prev() {
                console.log("prev");
                if (this.index>0) { 
                    this.index -= 1; 
                }
            }

            next() {
                console.log("next");
                if (this.index < this.repos.length-1) { 
                    this.index +=1;
                }
            }

            isQuestionsLoaded(q) {
                if (q) {
                  console.log('loaded questions', q); // questions are loaded.
                }
            }
        }
        window.customElements.define(Quiz.is, Quiz);
    </script>
</dom-module>

Answer 1

您可以将iron-ajax结果绑定到custom-element.html类似的内容：

   <iron-ajax
        id="requestRepos"
        url="http://192.168.178.31:8080/demo/assessment"
        params=''
        handle-as="json"
        last-response = "{{questions}}"
        on-response="handleResponse">
    </iron-ajax>
    <custom-element
         questions = "[[questions]]">
    </custom-element>

你的custom-element.html中的

：

...
static get properties() { return {  
        questions: {
            type: Array,
            observer: 'isQuestionsLoaded'}
}  // end of decleration properties
...

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

如何存储get请求的响应，以便稍后在Polymer中使用它

1 个答案: