[英]Why does this polymer element's property resolve to undefined?
我試圖動態地為iron-ajax模板分配屬性，但它解析為undefined。
<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>
生成的url如下所示：
`http://localhost:3003/api/taxons/products?token=my-token&id=undefined`
dom-module的categoryid屬性undefined因為我可以看到屬性上反映的正確屬性值，這意味着它與如何將其分配給屬性有關。 我也嘗試了created和attached回調，但仍然無法正常工作。
編輯： categoryid在實例化時傳遞給模塊，如下所示：
<products-service products="{{products}}" categoryid="{{categoryid}}"></products-service>
如此處所示，傳遞給服務的categoryid已經有了一個值。 （圖像上的元素名稱可能略有不同。我縮短它們以使問題更簡潔。）
調用服務的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>
我認為你在這里遇到了一些問題，需要稍微重新思考一下你的結構。
首先，因為categoryid屬性綁定在元素之外，所以它的初始值將是未定義的。 基本上，創建並附加元素，運行所有生命周期方法， 然后設置categoryid。 這也意味着因為你有一個帶有auto設置的iron-ajax ，它最初會嘗試使用首先給出的信息發出請求。
我建議的更改：
<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>
問題是你如何將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>
產品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>
產品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>
Zikes診斷是正確的，這是返回undefined的原因是頁面生命周期是在數據加載到頁面之前完成的。 但是，我無法得到他的答案，為我的解決方案工作。 （我可能在某處出錯。）我的api也使用查詢字符串來傳遞數據，而你的api也沒有這樣做，我相信這個答案會對遇到這種情況的人有所幫助。 為了解決這個問題，我在我的財產中添加了一個觀察員，我的答案來自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; },
在元素上設置屬性會給出錯誤“無法通過Polymer設置屬性'...'的undefined”
[英]Setting attribute on element gives error "Cannot set property '…' of undefined' with Polymer
為什么`Polymer（）`函數需要元素名稱作為其第一個參數？
[英]Why does the `Polymer()` function need the element name as its first parameter?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.