Sử dụng polymer ajax phản ứng

Question

Tôi đã yếu tố polymer sau mà tôi đã tạo ra:

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

tôi kêu gọi này bên index.html của tôi bằng cách thực hiện:

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

Tôi hy vọng rằng đối với mỗi đối tượng được trả về trong mảng cần làm, một số <span> sẽ được in. Tuy nhiên, khi tôi chạy ứng dụng, tôi nhận được đầu ra sau trong giao diện điều khiển:

Uncaught TypeError: Cannot read property 'todos' of undefined

trong polymer.html line 1001

Tôi không chắc chắn những gì đang xảy ra ở đây và làm thế nào để tham khảo các dữ liệu nhận được trở lại từ phản ứng ajax .

Answer 1

Sau khi đập đầu vào tường trong vài giờ, tôi đã xoay sở để giải quyết vấn đề này. Tôi đã tạo thành phần của riêng mình có tên là ajax-service có một tài sản công khai được gọi là todos là một số Array. Trong phần tử này, tôi sử dụng phần tử iron-ajax để thực hiện cuộc gọi ajax.

Khi ajax hoàn tất, một hàm được gọi và phản hồi được đặt trên thuộc tính todos. Tôi cũng đã đặt các phím reflectToAttribute và notify thành true. Điều này có nghĩa là giá trị của thuộc tính todos được phản ánh lại thuộc tính trên nút máy chủ và có sẵn để liên kết hai chiều (xem here để biết thêm thông tin).

yếu tố task-list-app của tôi là như sau:

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

và ajax-service yếu tố của tôi:

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

Làm theo cách này có nghĩa là tôi có thể chỉnh sửa dữ liệu trong on-response chức năng trước khi đặt nó trên phần tử.

Answer 2

Trước hết mẫu thứ hai mà bạn đang sử dụng để lặp qua dữ liệu của bạn phải là một "dom-repeat" và không phải là một "dom-repeater". Thứ hai, bạn có thể liên kết trực tiếp phản ứng của sắt-ajax với mẫu lặp của bạn. Như thế này,

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

Vì vậy, bạn là giá trị cơ bản ràng buộc của cuối cùng đáp ứng tài sản cho mẫu vòng lặp của bạn trực tiếp.

Answer 3

Bạn cần phải xác định tài sản trước khi sử dụng nó trong các kịch bản:

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

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