Polymer 1.0 有条件 dom-重复问题
Polymer 1.0 Conditional dom-repeat issue
我有一个这样的自定义元素:
<dom-module id="customer-location">
<template>
<template is="dom-repeat" items="{{customers}}" filter="isCustomerFound" observe="cuname item.cuname">
<template is="dom-repeat" items="{{item.branches}}">
...
...
</template>
</template>
</template>
</dom-module>
此元素有一个 属性 cname
其值是从 index.html
设置的
<customer-location cname="{{params.name}}"></customer-location>
以上值被很好地转移到 customer-location
元素中。我可以像 <p id="maxp">{{cname}}</p>
.
一样打印它
现在,在 <script>...</script>
中,我正在尝试使用以下函数访问 属性 cname
:
<script>
(function () {
Polymer({
// define element prototype here
is: 'customer-location',
properties: {
latlngcombo: { type: String },
cname: { type: String }
},
isCustomerFound: function (item) {
var dm = this.$$("#maxp").innerHTML;
return item.cuname == dm;
},
ready: function () {
this.customers = [
{ "cuname": "msi", "name": "Microsoft India", "addr": "2, Strand Road", "addr2": "Kolkata, IN", "phone": "332.245.9910", "lat": "22.589091", "lng": "88.352359", "branches": [
{ "branch": "Hyderabad", "email": "hydho@cyfoxpapers.com", "phone": "1582012244", "address": "69/A, Twisted Road, Banjara Hills, Hyderabad: 600001", "code": "CPHYD" }
]
},
{ "cuname": "googindia", "name": "Google India Inc.", "addr": "6/B, Pragati Apartment", "addr2": "Pitampura, New Delhi, IN", "phone": "493.050.2010", "lat": "28.61598", "lng": "77.244382" },
{ "cuname": "gabonint", "name": "Gabon Internationl", "addr": "187 Kabi Kirandhan Road", "addr2": "Bhadrakali, IN", "phone": "983.193.3166", "lat": "22.665979", "lng": "88.348134" },
{ "cuname": "itg", "name": "India Tour Guides", "addr": "115/5 Palash Sarani", "addr2": "Amritsar, India", "phone": "943.390.9166", "lat": "31.604877", "lng": "74.572276" },
{ "cuname": "creatad", "name": "Creative Ad Agency", "addr": "25 BPMB Saranai", "addr2": "McLeodganj, Dharamsala. IN", "phone": "943.390.9166", "lat": "32.232596", "lng": "76.324327" }
];
}
});
})();
</script>
函数isCustomerFound
用于检查当前cname
值是否与外部dom-repeat
循环中的item.cuname
匹配。
但我从来没有从 var mm = this.$$("#maxp").innerHTML;
中得到值
请告诉我我做错了什么。在另一个类似的元素中,this.$$("#maxp").innerHTML
的值很好!
提前致谢
这是 cname
属性被绑定到元素范围之外的结果。发生的事情是,首先创建 <customer-location>
元素并将其标记到 DOM 上,经过 ready
、attached
等。然后它接收到 [=11 的新值=] 因为它是通过其父级的绑定传入的。
因此dom-repeat
首先使用cname
的undefined
值执行isCustomerFound
过滤器,但不知道在[=11]之后重新解析数据=] 已更新。不幸的是,因为 cname
不是 items
集合的 属性,所以它不能放入 observe
,所以你必须在外部观察 属性 并且手动重新触发 dom-repeat
过滤。
<dom-module id="customer-location">
<template>
<template is="dom-repeat" items="{{customers}}" id="customerList" filter="isCustomerFound" observe="cuname item.cuname">
<template is="dom-repeat" items="{{item.branches}}">
...
...
</template>
</template>
</template>
</dom-module>
<script>
(function () {
Polymer({
is: 'customer-location',
properties: {
latlngcombo: String,
cname: String
},
observers: [
'_updateCname(cname)'
],
_updateCname: function(cname) {
this.$.customerList.render();
},
isCustomerFound: function (item) {
return item.cuname == this.cname;
},
ready: function () {
this.customers = [
...
];
}
});
})();
</script>
我有一个这样的自定义元素:
<dom-module id="customer-location">
<template>
<template is="dom-repeat" items="{{customers}}" filter="isCustomerFound" observe="cuname item.cuname">
<template is="dom-repeat" items="{{item.branches}}">
...
...
</template>
</template>
</template>
</dom-module>
此元素有一个 属性 cname
其值是从 index.html
<customer-location cname="{{params.name}}"></customer-location>
以上值被很好地转移到 customer-location
元素中。我可以像 <p id="maxp">{{cname}}</p>
.
现在,在 <script>...</script>
中,我正在尝试使用以下函数访问 属性 cname
:
<script>
(function () {
Polymer({
// define element prototype here
is: 'customer-location',
properties: {
latlngcombo: { type: String },
cname: { type: String }
},
isCustomerFound: function (item) {
var dm = this.$$("#maxp").innerHTML;
return item.cuname == dm;
},
ready: function () {
this.customers = [
{ "cuname": "msi", "name": "Microsoft India", "addr": "2, Strand Road", "addr2": "Kolkata, IN", "phone": "332.245.9910", "lat": "22.589091", "lng": "88.352359", "branches": [
{ "branch": "Hyderabad", "email": "hydho@cyfoxpapers.com", "phone": "1582012244", "address": "69/A, Twisted Road, Banjara Hills, Hyderabad: 600001", "code": "CPHYD" }
]
},
{ "cuname": "googindia", "name": "Google India Inc.", "addr": "6/B, Pragati Apartment", "addr2": "Pitampura, New Delhi, IN", "phone": "493.050.2010", "lat": "28.61598", "lng": "77.244382" },
{ "cuname": "gabonint", "name": "Gabon Internationl", "addr": "187 Kabi Kirandhan Road", "addr2": "Bhadrakali, IN", "phone": "983.193.3166", "lat": "22.665979", "lng": "88.348134" },
{ "cuname": "itg", "name": "India Tour Guides", "addr": "115/5 Palash Sarani", "addr2": "Amritsar, India", "phone": "943.390.9166", "lat": "31.604877", "lng": "74.572276" },
{ "cuname": "creatad", "name": "Creative Ad Agency", "addr": "25 BPMB Saranai", "addr2": "McLeodganj, Dharamsala. IN", "phone": "943.390.9166", "lat": "32.232596", "lng": "76.324327" }
];
}
});
})();
</script>
函数isCustomerFound
用于检查当前cname
值是否与外部dom-repeat
循环中的item.cuname
匹配。
但我从来没有从 var mm = this.$$("#maxp").innerHTML;
请告诉我我做错了什么。在另一个类似的元素中,this.$$("#maxp").innerHTML
的值很好!
提前致谢
这是 cname
属性被绑定到元素范围之外的结果。发生的事情是,首先创建 <customer-location>
元素并将其标记到 DOM 上,经过 ready
、attached
等。然后它接收到 [=11 的新值=] 因为它是通过其父级的绑定传入的。
因此dom-repeat
首先使用cname
的undefined
值执行isCustomerFound
过滤器,但不知道在[=11]之后重新解析数据=] 已更新。不幸的是,因为 cname
不是 items
集合的 属性,所以它不能放入 observe
,所以你必须在外部观察 属性 并且手动重新触发 dom-repeat
过滤。
<dom-module id="customer-location">
<template>
<template is="dom-repeat" items="{{customers}}" id="customerList" filter="isCustomerFound" observe="cuname item.cuname">
<template is="dom-repeat" items="{{item.branches}}">
...
...
</template>
</template>
</template>
</dom-module>
<script>
(function () {
Polymer({
is: 'customer-location',
properties: {
latlngcombo: String,
cname: String
},
observers: [
'_updateCname(cname)'
],
_updateCname: function(cname) {
this.$.customerList.render();
},
isCustomerFound: function (item) {
return item.cuname == this.cname;
},
ready: function () {
this.customers = [
...
];
}
});
})();
</script>