2015-06-09 13 views
6

Sto tentando di assegnare dinamicamente un attributo a un modello iron-ajax ma si risolve in undefined.Perché la proprietà di questo elemento polimerico si risolve in modo indefinito?

<dom-module id="products-service"> 
    <style> 
    :host { 
     display: none; 
    } 
    </style> 

    <template> 
    <iron-ajax id="productsajax" 
     auto 
     url="http://localhost:3003/api/taxons/products" 
     params='{"token":"my-token"}' 
     method='GET' 
     on-response='productsLoaded' 
     handleAs='json'> 
    </iron-ajax> 
    </template> 
</dom-module> 

<script> 
(function() { 
    Polymer({ 
     is: 'products-service', 

     properties: { 
      categoryid: { 
       type: String, 
       notify: true, 
       reflectToAttribute: true 
      } 
     }, 

     //here I am trying to add and `id` to the `iron-ajax` `params` attribute. 
     ready: function() { 
      this.$.productsajax.params.id = this.categoryid; 
     } 
    }); 
})(); 
</script> 

l'URL risultante è simile al seguente:

`http://localhost:3003/api/taxons/products?token=my-token&id=undefined` 

categoryid proprietà s' Il dom-module non è undefined come posso vedere il valore della proprietà corretta riflette sugli attributi che significa che qualcosa a che fare con il modo lo sto assegnando all'attributo. Ho anche provato questo sui callback created e attached e ancora non funziona.

Edit: Il categoryid viene passato al modulo quando si crea un'istanza in questo modo:

<products-service products="{{products}}" categoryid="{{categoryid}}"></products-service> 

come si vede qui la categoryid passato al servizio è già un valore. (I nomi degli elementi sull'immagine possono essere leggermente diversi. Ho accorciato loro di fare la domanda meno prolisso.)

enter image description here

Il category-products-list dove il servizio viene chiamato aspetto come questo

<dom-module id="category-products-list"> 
    <template> 
    <category-products-service products="{{products}}" categoryid="{{categoryid}}"></category-products-service> 
    <div> 
     <template is="dom-repeat" items="{{products}}"> 
     <product-card on-cart-tap="handleCart" product="{{item}}"> 
     <img width="100" height="100"> 
     <h3>{{item.name}}</h3> 
     <h4>{{item.display_price}}</h4> 
     </product-card> 
    </template> 
    </div> 
</template> 

</dom-module> 

<script> 
(function() { 
    Polymer({ 
    is: 'category-products-list', 

    properties: { 
    categoryid: { 
     type: String, 
     notify: true, 
     reflectToAttribute: true 
    } 
    }, 

ready: function() { 
    //this is undefined too 
    console.log("categoryid in the list module: "+categoryid) 
    } 
    }); 
    })(); 
</script> 
+0

Da dove viene l'IDCategoria viene? Dove è ambientato? Cosa succede quando si aggiunge console.log (this.categoryid); nella tua funzione pronta? –

+0

Ho modificato la domanda con le informazioni che cerchi. Quando faccio 'console.log (this.categoryid);': Prendo 'undefined' –

+0

il problema è come si passa il categoryid al servizio prodotti ... non è un problema nell'elemento del prodotto-servizio stesso . Se fai funzionerà. Quindi la prossima domanda è, da dove prendi il categoryid? Non so da dove arrivi {{categoryid}}, ma farò un'ipotesi selvaggia: potresti provare

risposta

6

Penso che tu stia incontrando una combinazione di problemi qui, e devi rivedere leggermente la tua struttura.

Innanzitutto, poiché l'attributo categoryid è associato all'esterno dell'elemento, il suo valore iniziale sarà indefinito. Fondamentalmente, il tuo elemento viene creato e allegato, con tutti i metodi del ciclo di vita eseguiti, e quindi viene impostato il categoryid. Ciò significa anche che, poiché si dispone di un valore iron-ajax con il set auto, inizialmente si cercherà di effettuare una richiesta con le informazioni fornite per prime.

mie modifiche consigliate:

<dom-module id="products-service"> 
    <style> 
    :host { 
     display: none; 
    } 
    </style> 

    <template> 
    <iron-ajax id="productsajax" 
     url="http://localhost:3003/api/taxons/products" 
     params='{"token":"my-token"}' 
     method='GET' 
     on-response='productsLoaded' 
     handleAs='json'> 
    </iron-ajax> 
    </template> 
</dom-module> 

<script> 
(function() { 
    Polymer({ 
     is: 'products-service', 

     properties: { 
      categoryid: { 
       type: String, 
       notify: true, 
       reflectToAttribute: true 
      } 
     }, 

     observers: [ 
      // Note that this function will not fire until *all* parameters 
      // given have been set to something other than `undefined` 
      'attributesReady(categoryid)' 
     ], 

     attributesReady: function(categoryid) { 
      this.$.productsajax.params.id = categoryid; 

      // With the removal of `auto` we must initiate the request 
      // declaratively, but now we can be assured that all necessary 
      // parameters have been set first. 
      this.$.productsajax.generateRequest(); 
     } 
    }); 
})(); 
</script> 
+0

Quando faccio questo il l'id non riflette nell'url' risultante, nemmeno con un valore di 'undefined'. –

+0

@OptimusPette Sospetto che il componente 'iron-ajax' non si renda conto che i suoi parametri sono stati aggiornati. Prova 'this. $. Productsajax.set ('params.id', this.categoryid);' – Zikes

+0

stesso effetto, nessun id impostato nei parametri. –

0

Il problema è come si sta passando l'IDCategoria nella prodotti-servizio di ... non è un problema nell'elemento prodotti-servizio stesso. Se lo fai, <products-service categoryid="5"></products-service> funzionerà. Chiaramente c'è molto di più di complessità per la vostra applicazione, ma ho creato alcuni elementi semplici che funzionano correttamente:

index.html:

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 
<meta name="mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 

<title>My Test</title> 

<!-- Load platform support before any code that touches the DOM. --> 
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"> </script> 

<link rel="import" href="elements/product-list.html"> 

</head> 

<body> 
    <product-list categoryid="5"></product-list> 
</body> 

</html> 

prodotto-list.html:

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../elements/product-service.html"> 


<dom-module id="product-list"> 
<style> 

</style> 

<template> 
<product-service categoryid="{{categoryid}}"></product-service> 
</template> 
</dom-module> 

<script> 
Polymer({ 
    is: 'product-list' 
}); 
</script> 

prodotto -service.html:

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


<dom-module id="product-service"> 
<style> 

</style> 

<template> 
<iron-ajax id="productsajax" 
    auto 
    url="http://localhost:3003/api/taxons/products" 
    params='{"token":"my-token"}' 
    method='GET' 
    on-response='productsLoaded' 
    handleAs='json'> 
</iron-ajax> 
</template> 
</dom-module> 

<script> 
Polymer({ 
    is: 'product-service', 
    properties: { 
     categoryid: { 
       type: String, 
       notify: true, 
       reflectToAttribute: true 
       } 
}, 

//here I am trying to add and `id` to the `iron-ajax` `params` attribute. 
ready: function() { 
console.log(this.categoryid); 
this.$.productsajax.params.id = this.categoryid; 
}, 
productsLoaded: function(e) { 
console.log('Response'); 
} 

}); 
</script> 
0

La diagnosi delle zecche è corretta, il motivo per cui questo è tornato indefinito è il ciclo di vita della pagina è completato prima che i dati vengano caricati sulla pagina. Tuttavia, non sono riuscito a far funzionare la sua risposta per la mia soluzione. (Probabilmente un errore da parte mia, da qualche parte.) La mia API usa anche stringhe di query per passare i dati, mentre la tua non lo fa, credo che questa risposta sarà utile a chiunque si imbatta in questa situazione come ho fatto io.Per risolvere questo problema, ho aggiunto un osservatore alla mia proprietà, ho basato questa risposta da https://www.polymer-project.org/1.0/docs/devguide/observers. Ho usato l'osservatore semplice. Credo che Zikes stia usando uno complesso.

<iron-ajax id="productsajax" url= {{ajaxUrl}} method='GET' 
 
     on-response='productsLoaded' handleAs='json'> 
 
</iron-ajax> 
 

 
Polymer({ 
 
    is: 'product-service', 
 
    properties: { 
 
      categoryid: { 
 
       type: String, 
 
       notify: true, 
 
       reflectToAttribute: true, 
 
       observer: 'catIdReady' 
 
      }, 
 
      ajaxUrl: { 
 
       type: String, 
 
       notify: true 
 
      } 
 
    }, 
 
    catIdReady: function (catidnew, catidold) { 
 
     this.set('ajaxUrl', this._getAjaxUrl()); 
 
     this.$.productsajax.generateRequest(); 
 
     console.log("catidReady!" + catidnew); 
 
    }, 
 
    _getAjaxUrl: function() { 
 
     console.log(this.categoryid); 
 
     return 'http://localhost:3003/api/taxons/products?categoryId=' + 
 
     this.categoryid; 
 
    },

Problemi correlati