बहुलक ajax प्रतिक्रिया

Question

मैं है निम्नलिखित बहुलक तत्व है जो मैं बनाया है का उपयोग करना:

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> 

<dom-module id="task-list-app"> 
    <style> 
     :host { 

     } 
    </style> 
    <template> 
     <iron-ajax auto url="../tasks.json" handle-as="json" on-response="handleResponse"></iron-ajax> 
     <template is="dom-repeater" items="{{todos}}"> 
      <span>hello</span> 
     </template> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
     is: "task-list-app", 
     created: function() { 
      this.todos = []; 
     }, 

     handleResponse: function (data) { 
      this.todos = data.detail.response; 
     } 
    }); 
</script> 

मैं ऐसा करके मेरी index.html अंदर इस बोल रहा हूँ:

<task-list-app></task-list-app> 

मैं हर के लिए उम्मीद कर रहा हूँ कि ऑर्डो टोडो सरणी में लौटाया गया, <span> मुद्रित किया जाएगा।

polymer.html line 1001 में

Uncaught TypeError: Cannot read property 'todos' of undefined

मुझे यकीन है कि यहाँ क्या हो रहा है और कैसे संदर्भ के लिए डेटा ajax प्रतिक्रिया से वापस प्राप्त होता है नहीं कर रहा हूँ: हालांकि, जब मैं अनुप्रयोग चलाने, मैं कंसोल में निम्नलिखित आउटपुट प्राप्त ।

Answer 1

कुछ घंटों तक दीवार पर अपने सिर को टक्कर देने के बाद मैंने इसे हल करने में कामयाब रहा है। मैंने ajax-service नामक अपना स्वयं का तत्व बनाया है जिसमें todos नामक सार्वजनिक संपत्ति है जो Array है। इस तत्व में, मैं AJAX कॉल करने के लिए iron-ajax तत्व का उपयोग करता हूं।

जब AJAX पूरा हो जाता है, तो एक फ़ंक्शन कहा जाता है और प्रतिक्रिया todos संपत्ति पर सेट की जाती है। मैंने कुंजी को reflectToAttribute और notify को भी सही पर सेट किया है। इसका मतलब है कि todos संपत्ति का मूल्य होस्ट नोड पर विशेषता पर वापस दिखाई देता है और यह दो-तरफा बाध्यकारी के लिए उपलब्ध है (अधिक जानकारी के लिए here देखें)।

<link rel="import" href="ajax-service.html"> 
<link rel="import" href="task-item.html"> 
<link rel="import" href="tiny-badge.html"> 

<dom-module id="task-list-app"> 
    <style> 
     :host { 

     } 
    </style> 
    <template> 
     <ajax-service todos="{{todos}}"></ajax-service> 
     <template is="dom-repeat" items="{{todos}}"> 
      <task-item task="{{item}}"></task-item> 
     </template> 
     <div> 
      <tiny-badge>[[todos.length]]</tiny-badge> total tasks 
     </div> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
     is: "task-list-app" 
    }); 
</script> 

और मेरे ajax-service तत्व:

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> 

<dom-module id="ajax-service"> 
    <style> 
     :host { 

     } 
    </style> 
    <template> 
     <iron-ajax auto url="../tasks.json" handle-as="json" on-response="tasksLoaded"></iron-ajax> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
     is: "ajax-service", 
     properties: { 
      todos: { 
       type: Array, 
       reflectToAttribute: true, 
       notify: true 
      } 
     }, 
     attached: function() { 
      this.todos = []; 
     }, 
     tasksLoaded: function (data) { 
      this.todos = data.detail.response; 
     } 
    }); 
</script> 

कर रहा इस तरह से इसका मतलब है मैं इस पर सेट करने से पहले on-response समारोह में डेटा को संपादित करने में सक्षम हूँ

मेरे task-list-app तत्व इस प्रकार है तत्व।

Answer 2

कि आप अपने डेटा लूप करने के लिए प्रयोग कर रहे हैं एक "डोम-दोहराने" और नहीं एक "डोम-पुनरावर्तक" होना चाहिए सभी दूसरे टेम्पलेट सबसे पहले। दूसरा, आप सीधे अपने लूपिंग टेम्पलेट में लौह-एजेक्स की प्रतिक्रिया को बांध सकते हैं। इस तरह,

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> 

<dom-module id="task-list-app"> 
    <style> 
     :host { 

     } 
    </style> 
    <template> 
     <iron-ajax auto url="../tasks.json" handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax> 
     <template is="dom-repeat" items="[[ajaxResponse.todos]]"> 
      <span>{{item.todoItem}}</span> 
     </template> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
     is: "task-list-app" 
    }); 
</script> 

तो तुम अंतिम प्रतिक्रिया अपने पाशन टेम्पलेट सीधे संपत्ति के मूल रूप से बाध्यकारी मान रहे हैं।

Answer 3

आप स्क्रिप्ट में उपयोग करने से पहले संपत्ति परिभाषित करने की जरूरत:

<script> 
    Polymer({ 
    is: "task-list-app", 
    properties: { 
     todos: { 
     type: Array, 
     notify: true 
     } 
    }, 

    handleResponse: function (data) { 
     this.todos = data.detail.response; 
    } 
    }); 
</script>