J'essaie d'attribuer de manière dynamique un attribut à un modèle code> Iron-Ajax CODE>, mais il se résout à indéfini.
<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>
3 Réponses :
Je pense que vous rencontrez une combinaison de problèmes ici et devez repenser légèrement votre structure.
Premièrement, car l'attribut CatégorieID est liée à l'extérieur de votre élément, sa valeur initiale sera indéfinie. Fondamentalement, votre élément est créé et connecté, avec toutes les méthodes de cycle de vie exécutées et alors em> la catégorieID est définie. Cela signifie également que, parce que vous avez un Iron-ajax code> avec auto code> défini, il essaiera d'abord de faire une demande avec les informations dont il est d'abord donné. P> Mes modifications recommandées: P> <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>
Lorsque je fais cela, l'identifiant ne reflète pas dans l'URL résultante , pas même avec une valeur de non défini .
@OPTIMUSPETTE Je soupçonne que le composant Iron-Ajax ne réalise pas que ses paramètres ont été mis à jour. Essayez ceci. $. ProduitsAjax.set ('Params.ID', ce.catégoryl);
même effet, aucun identifiant défini dans les paramètres.
@OPTIMUSPETTE Veuillez regarder ma réponse révisée
Il semble que ce soit le problème tout au long de la situation, tout fonctionne bien maintenant avec vos modifications recommandées, il semble que je dois revenir sur les Docs sur les observateurs.
Le problème est de savoir comment vous passez la catégorieId dans le service de produits ... Ce n'est pas un problème dans l'élément de service de produits lui-même. Si vous faites index.html: p> produit-list.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>
Zikes Le diagnostic est correct, la raison pour laquelle cela est renvoyé non défini est le cycle de vie de page est terminé avant que les données ne soient chargées sur la page. Cependant, je n'ai pas pu obtenir sa réponse à travailler pour ma solution. (Probablement une erreur de ma part, quelque part.) Mon API utilise également des chaînes de requête pour réussir les données, tandis que vous ne le faites pas, je pense que cette réponse sera utile à quiconque se heurte à cette situation comme je l'ai fait. Pour résoudre ce problème, j'ai ajouté un observateur à ma propriété, j'ai basé cette réponse de https://www.polymère-project.org/1.0/docs/devGuide/observers . J'ai utilisé l'observateur simple. Je crois que Zikes utilise un complexe.
p>
<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;
},
D'où vient la catégorieId? Où est-il défini? Que se passe-t-il lorsque vous ajoutez une console.log (ceci.categoryId); dans votre fonction prête?
J'ai édité la question avec les informations que vous recherchez. Quand je fais
console.log (this.categoryid); : i obteneznon définiLe problème est de savoir comment vous passez la catégorieId dans le service de produits ... Ce n'est pas un problème dans l'élément de service de produits lui-même. Si vous faites Cela fonctionnera. La question suivante est donc, où obtenez-vous la catégorieId? Je ne sais pas où vous obtenez le {{CatégorieId}} de, mais je vais prendre une supposition sauvage: vous pouvez essayer
S'il vous plaît vérifier ma dernière modification à la question. Le
CatégorieId transmis au service a déjà une valeur.Pourriez-vous ajouter votre élément de catégorie-produits-list-s'il vous plaît. Je suppose que le problème des racines est dans cet élément.
La valeur passée via l'attribut CatégorieId devrait être disponible être disponible à
prêt , donc laconsole.log ne doit pas retournernon défini . Veuillez copier et coller l'intégralité du code pour le composant tel que (moins de jetons de sécurité), car je soupçonne que la réponse réside dans une faute de frappe ou quelque chose.@ Erikhöhmann j'ai ajouté la liste
dom-module . LeCatégorieId dans ce module auprêt est égalementnon défini mais il est disponible lorsqu'il est présent lorsqu'il est transmis au serviceDOM -Module .Merci. Je ne vois toujours pas où vous passez dans la catégorieID. Vous le passez probablement dans un seul élément plus loin. J'ai créé une réponse, qui fonctionne. Peut-être que vous pouvez l'utiliser comme référence. Vous pouvez également essayer de supprimer la propriété CatégorieId dans le script du service de produits de catégorie, car on dirait que vous obtenez cela de l'élément parent.
La CatégorieID est transmise des itinéraires.
Page ('/ Catégories /: Nom /: CatégorieId', Fonction (Données) {APP.ROUTE = 'Catégorie-Page'; app.params = data.params;});