यह बहुलक तत्व की संपत्ति अपरिभाषित क्यों होती है? - जावास्क्रिप्ट, बहुलक, वेब घटक, बहुलक-1.0

मैं गतिशील रूप से एक विशेषता को असाइन करने की कोशिश कर रहा हूं iron-ajax टेम्पलेट लेकिन यह अपरिभाषित करने का संकल्प करता है।

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

परिणामी यूआरएल इस तरह दिखता है:

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

The dom-module"रों categoryid संपत्ति नहीं है undefined के रूप में मैं सही गुण मूल्य जो इसे कुछ कैसे यह विशेषता को निर्दिष्ट कर रहा हूं के साथ क्या मतलब है पर प्रतिबिंबित देख सकते हैं ।मैं भी इस पर की कोशिश की है created तथा attached कॉलबैक और अभी भी काम नहीं कर रहा ।

संपादित करें: categoryid मॉड्यूल जब यह इस तरह आरंभ करने के लिए पारित किया है:

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

जैसा कि यहां देखा categoryid सेवा को पास पहले से ही एक मूल्य है । (छवि पर तत्व नाम थोड़ा अलग हो सकता है ।मैं उंहें छोटा करने के लिए सवाल कम वाचाल बनाने के लिए.)

यहां छवि विवरण दर्ज करें

The category-products-list जहां सेवा है बुलाया जा रहा है इस तरह दिखता है

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

उत्तर:

उत्तर № 1 के लिए 6

मुझे लगता है कि आप "मुद्दों का एक संयोजन में यहां चल फिर से, और थोड़ा अपनी संरचना पर पुनर्विचार की जरूरत है ।

सबसे पहले, क्योंकि categoryid विशेषता अपने तत्व के बाहर सीमित है उसके प्रारंभिक मूल्य अपरिभाषित हो जाएगा ।मूलतः, अपने तत्व बनाया और संलग्न है, सभी जीवनचक्र विधियों के साथ चलाया जाता है, और फिर categoryid सेट हो जाता है । यह भी मतलब है कि क्योंकि तुम एक iron-ajax साथ में auto सेट, यह शुरू में यह पहली बार दिया जाता है जानकारी के साथ एक अनुरोध बनाने की कोशिश करेंगे ।

मेरे अनुशंसित परिवर्तन:

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

समस्या यह है कि तुम कैसे products-service...it में categoryid गुजर रहे है उत्पादों में एक समस्या-सेवा तत्व ही नहीं है ।यदि आप <products-service categoryid="5"></products-service> यह काम करेगा । जाहिर है वहां आपके आवेदन के लिए एक बहुत अधिक जटिलता है, लेकिन मैं कुछ सरल तत्व है जो सही ढंग से काम बनाया:

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>

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

product-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 № 3

Zikes निदान सही है, कारण यह अपरिभाषित लौट रहा है पृष्ठ जीवन चक्र से पहले डेटा पृष्ठ पर भरी हुई है पूरा हो गया है ।हालांकि, मैं अपने समाधान के लिए काम करने के लिए अपने जवाब पाने में असमर्थ था ।(शायद मेरी ओर से एक त्रुटि, कहीं.) मेरा एपीआई भी क्वेरी तार का उपयोग करता है डेटा पारित करते हैं, जबकि तुंहारा यह नहीं है, मेरा मानना है कि यह जवाब किसी को जो इस स्थिति में चलाने के लिए उपयोगी होगा जैसे मैंने किया था ।इस मुद्दे को हल करने के लिए, मैं अपनी संपत्ति के लिए एक पर्यवेक्षक जोड़ा, मैं इस से जवाब आधारित https://www.polymer-project.org/1.0/docs/devguide/observers. मैं साधारण पर्यवेक्षक इस्तेमाल किया । मेरा मानना है कि Zikes एक जटिल एक का उपयोग कर रहा है ।

<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;
},


संबंधित सवाल
सबसे लोकप्रिय