polimer ajax tepkisini

Question

Oluşturduğum aşağıdaki polimer unsuru olan

kullanma:

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

Ben yaparak benim index.html içinde bu sesleniyorum: Her için o

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

bekliyorum

todo dizisinde döndürülen nesne, <span> basılacaktır.

Uncaught TypeError: Cannot read property 'todos' of undefined

polymer.html line 1001 I Buradaki ve nasıl başvurmak için veri ajax yanıt geri alınır ne olduğundan emin değilim: Ben uygulamanın çalışma Ancak, ben konsolunda aşağıdaki çıktıyı almak .

bir " dom-repeat" değil, bir " dom-tekrarlayıcı" olmalıdır verilerinizin döngü kullanan tüm ikinci şablonun

Answer 1

Kafamı bir kaç saat boyunca duvara çarptıktan sonra bunu çözmeyi başardım. Bir Array olan todos adında bir kamuya ait olan ajax-service adlı kendi öğemi oluşturdum. Bu öğede ajax çağrısını yapmak için iron-ajax öğesini kullanıyorum.

Ajax tamamlandığında, bir işlev çağrılır ve yanıt, todos özelliğinde ayarlanır. Ayrıca reflectToAttribute ve notify anahtarlarını doğru olarak ayarladım. Bu, todos özelliğinin değeri ana bilgisayar düğümündeki özniteliğe geri yansıtıldığı ve iki yönlü bağlamaya uygun olduğu anlamına gelir (daha fazla bilgi için bkz. 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> 

ve benim ajax-service eleman:

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

bu şekilde ben onu ayarlamadan önce on-response fonksiyonu verileri düzenlemek mümkün duyuyorum demektir de genişlemiş şöyle

Benim task-list-app unsurdur eleman

Answer 2

İlk. İkincisi, iron-ajax'ın yanıtını döngü şablonunuza doğrudan bağlayabilirsiniz. Bunun gibi,

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

Yani son tepki doğrudan döngü şablona mülkünün temelde bağlayıcı değeri vardır.

Answer 3

Sen komut kullanmadan önce özellik tanımlamak gerekir: Cevabınız için

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

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