首先，对不起，如果我的问题太傻了，我仍然是Polymer 2的新人。
我正面临一个小问题。我创建了一个自定义组件，我通过xhr加载一些动态数据。 一切似乎都能正常工作，但我注意到当我离开并回到这个视图时，组件没有改变，即使它提升了所有xhr以获得新数据。
我想知道问题是否数据已更新，但DOM仍然是相同的。
每次访问页面时是否可以强制系统“重新加载”组件？
提前致谢。
答案 0 :(得分：0)
这是一个自定义的“树视图组件”。
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/paper-collapse-item/paper-collapse-item.html">
<link rel="import" href="../../bower_components/vaadin-icons/vaadin-icons.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/iron-location/iron-location.html">
<link rel="import" href="../../portal_components/portal-measurement-units/portal-measurement-units.html">
<dom-module id="portal-tree-view">
<template>
<style include="iron-flex iron-flex-alignment">
<style>
:host {
display: block;
}
.icon
{
margin-right: 24px;
--iron-icon-height: 34px;
--iron-icon-width: 34px;
color: var(--disabled-text-color);
}
.icon-small
{
margin-right: 24px;
--iron-icon-height: 20px;
--iron-icon-width: 20px;
color: var(--disabled-text-color);
}
.icon-big
{
margin-right: 24px;
--iron-icon-height: 40px;
--iron-icon-width: 40px;
color: var(--disabled-text-color);
}
.alert {
color: orange;
}
.emergency {
color: red;
}
</style>
<template is="dom-if" if=[[!loading]]>
<template is="dom-repeat" items={{tree}}>
<template is="dom-if" if="[[item.deploy]]">
<paper-collapse-item icon="icons:label" header="[[item.name]]" id="collapseitem" >
<portal-tree-view assets=[[item.children]] tasks=[[tasks]] results=[[results]] network=[[network]]></portal-tree-view>
</paper-collapse-item>
</template>
<template is="dom-if" if="[[item.mp]]">
<span style= "font-size: var(--paper-font-subhead_-_font-size); margin-left: 15px;">
<iron-icon class="icon" icon="label-outline"></iron-icon>
<iron-icon class="icon-big" style="color: black; float: right; margin-top: 40px" icon="vaadin:info-circle-o" on-click="goDetail"></iron-icon>
[[item.name]] <br/>
<span style="margin-left: 96px">
<iron-icon class="icon-small" style="color: [[item.lastacq_status]]" icon="vaadin:spark-line"></iron-icon>
<span style="color: [[checkLastAcqStatus(item)]]">[[getLastAcq(item)]]</span>
</span><br/>
<span style="margin-left: 86px">
Speed: <span style="color: [[checkSpeedStatus(item)]]">[[checkSpeed(item)]] </span>
</span><br/>
<span style="margin-left: 86px">
Acceleration: <span style="color: [[checkAccStatus(item)]]">[[checkAcc(item)]]</span>
</span><br/>
<span style="margin-left: 86px">
Temperature: <span style="color: [[checkTempStatus(item)]]">[[checkTemp(item)]]</item>
</span><br/>
</span><br/>
</template>
<template is="dom-if" if="[[item.transmitter]]">
<span style= "font-size: var(--paper-font-subhead_-_font-size); margin-left: 15px;">
<iron-icon class="icon" icon="label-outline"></iron-icon>
[[item.name]]<br/>
</span>
<span style="margin-left: 96px">
<iron-icon class="icon-small" style="color: [[item.latcom_status]]" icon="settings-input-antenna"></iron-icon>
<span style="color: [[checkLastComStatus(item)]]">[[getLastCom(item)]]</span>
</span><br/>
</template>
<template is="dom-if" if="[[item.endpoint]]">
<span style= "font-size: var(--paper-font-subhead_-_font-size); margin-left: 15px;">
<iron-icon class="icon" icon="label-outline"></iron-icon>
[[item.name]]<br/>
</span>
</template>
</template>
</template>
<template is="dom-if" if=[[loading]]>
<div class="center-center layout horizontal">
<img src="portal_components/portal-tree-view/loading.gif" />
</div>
</template>
<portal-lite-global-variables id="GLOBALS"></portal-lite-global-variables>
<portal-measurement-units id="UNITS"></portal-measurement-units>
<iron-location id="location"></iron-location>
</template>
<script>
/**
* `portal-tree-view`
*
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class portalTreeView extends Polymer.Element {
static get is() { return 'portal-tree-view'; }
static get properties() {
return {
assets: {
type: Array,
notify: true,
},
tasks: {
type: Object,
notify: true,
},
results: {
type: Object,
notify: true,
},
network: {
type: Array,
notify: true
},
tree: {
type: Array,
notify: true
},
trigger: {
type: Boolean,
observer: '_trigger'
}
};
}
static get observers() {
return [
'fullAssets(tasks, results)'
]
}
_trigger()
{
if (this.trigger)
{
this.ready();
console.log("trigger")
this.fullAssets();
}
}
toFixed(value, precision) {
return Number(value).toFixed(precision);
}
goDetail(event)
{
var item = event.model.item;
this.$.location.path="portal-lite-asset-details/"+item._id;
}
checkLastComStatus(item)
{
if (this.network[item.mac] !== undefined)
{
var current = this.$.GLOBALS.getUTCTimeStamp(new Date());
if (current < this.$.GLOBALS.getUTCTimeStamp(new Date(this.network[item.mac].last_com)) + 54000)
return 'orange';
else if (current > this.$.GLOBALS.getUTCTimeStamp(new Date(this.network[item.mac].last_com)) + 54000)
return 'red';
}
}
getLastAcq(item)
{
if (this.results[item._id] !== undefined)
return new Date(this.results[item._id].acqend).toLocaleDateString() + " " + new Date(this.results[item._id].acqend).toLocaleTimeString();
}
getLastCom(item)
{
if (this.network[item.mac] !== undefined)
return new Date(this.network[item.mac].last_com).toLocaleDateString() + " " + new Date(this.network[item.mac].last_com).toLocaleTimeString();
}
checkLastAcqStatus(item)
{
if (this.tasks[item._id] !== undefined)
return this.$.GLOBALS.checkTask(this.tasks[item._id], this.results[item._id]);
}
checkSpeed(item)
{
if (this.results[item._id] !== undefined)
{
if (this.results[item._id].globals.vib !== undefined &&
this.results[item._id].globals.vib.v !== undefined)
{
var aux = this.$.UNITS.speed(this.results[item._id].globals.vib.v[0]);
return aux.value.toFixed(2) + " " + aux.desc;
}
}
}
checkSpeedStatus(item)
{
if (this.results[item._id] !== undefined)
{
if (this.results[item._id].globals.vib !== undefined &&
this.results[item._id].globals.vib.v !== undefined)
{
if (this.results[item._id].globals.vib.v[1] == 1) return "orange";
else if (this.results[item._id].globals.vib.v[1] == 2) return "red";
}
}
}
checkAccStatus(item)
{
if (this.results[item._id] !== undefined)
{
if (this.results[item._id].globals.vib !== undefined &&
this.results[item._id].globals.vib.a !== undefined)
{
if (this.results[item._id].globals.vib.a[1] == 1) return "orange";
else if (this.results[item._id].globals.vib.a[1] == 2) return "red";
}
}
}
checkTempStatus(item)
{
if (this.results[item._id] !== undefined)
if (this.results[item._id].globals.temp !== undefined &&
this.results[item._id].globals.temp !== null)
{
if (this.results[item._id].globals.temp[1] == 1) return "orange";
else if (this.results[item._id].globals.temp[1] == 2) return "red";
}
}
checkAcc(item)
{
if (this.results[item._id] !== undefined)
{
if (this.results[item._id].globals.vib !== undefined &&
this.results[item._id].globals.vib.a !== undefined)
{
var aux = this.$.UNITS.g(this.results[item._id].globals.vib.a[0]);
return aux.value.toFixed(2) + " " + aux.desc;
}
}
}
checkTemp(item)
{
if (this.results[item._id] !== undefined)
{
if (this.results[item._id].globals.temp !== undefined &&
this.results[item._id].globals.temp !== null)
{
var aux = this.$.UNITS.temp(this.results[item._id].globals.temp[0]);
return aux.value.toFixed(1) + " " + aux.desc;
}
}
}
fullAssets()
{
if (this.assets !== undefined && this.network !== undefined)
{
this.loading = false;
this.assets.sort(function(d1,d2)
{
if (d1.children.length > 0) return -1;
return 1;
});
for (var i = 0; i < this.assets.length; i++)
{
this.assets[i].endpoint = false;
this.assets[i].mp = false;
this.assets[i].transmitter = false;
if (this.assets[i].children.length === 0)
this.assets[i].endpoint = true;
if (this.assets[i].t == 33554435)
{
this.assets[i].endpoint = false;
this.assets[i].transmitter = true;
this.assets[i].mac = this.assets[i].optionals.mac.toUpperCase();
}
if (this.assets[i].t == 16777218)
{
this.assets[i].endpoint = false;
this.assets[i].mp = true
}
this.assets[i].deploy = !this.assets[i].mp && !this.assets[i].endpoint && !this.assets[i].transmitter;
}
this.notifyPath('tree', this.assets);
}
}
constructor()
{
super();
this.loading = true;
this.queue_results = 0;
}
ready()
{
super.ready();
}
}
window.customElements.define(portalTreeView.is, portalTreeView);
</script>
</dom-module>
关于这个。$。UNITS我有一组函数来转换值（公制，英制等......）。
每次显示视图时都会执行checkSpeed（item）功能。 通过console.log我可以检查返回的值是否总是正确的，但是在离开时，我改变了统一（例如，从公制到英制），当我再次返回时，组件中的视图仍然保留在旧的统一中（即使函数中的console.log返回正确的值）。
希望它有用。
提前致谢。
[编辑]
最后在这里找到了解决方案：https://easyusedev.wordpress.com/2015/11/06/dynamically-loading-polymer-elements-on-the-fly/
为了确保每次调用视图时都要重新创建组件，请在所有内容都准备好加载组件时手动创建组件：
var tree = document.createElement('portal-tree-view');
而且，离开时，我将其删除：
var element = this.$.container.querySelector("portal-tree-view");
element.parentNode.removeChild(element)
En cualquier caso，muchas gracias por tutiempoÁlvaro。
最好的问候。
答案 1 :(得分：0)
我发现您在this.notifyPath('tree', this.assets);中正在进行fullAssets()，但我认为语法不正确。
来自docs：
调用notifyPath时，需要使用更改的确切路径。 例如，调用this.notifyPath（'profile'）不会选择 更改为profile.name，因为配置文件对象本身没有 改变。
所以试着这样做：
this.notifyPath('tree.property_you_want_to_be_changed');
或者使用MutableData mixin可能会更好。这个mixin允许更新数组并简单地通知UI
this.notifyPath('tree');