ファーストをリフレッシュする方法、申し訳ありませんが、私はまだポリマー2コンポーネントのすべての
私は少し問題に直面していますとの新たなんです。カスタムコンポーネントを作成しました。ここで、xhrを使用して動的データをロードします。 すべて正常に動作しているようですが、このビューに戻って戻ってくると、xhrがすべて新しいデータを取得してもコンポーネントは変更されませんでした。
データが更新されているが、DOMが同じであることが問題なのかどうかは疑問です。
ページにアクセスするたびにシステムに強制的にコンポーネントを再読み込みさせることはできますか？
ありがとうございます。
これはカスタムの「ツリービューコンポーネント」です。このオン
<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で返された値が常に正しいことを確認できますが、離れるときに、メトリックからインペリアルなどに変更されます。また、コンポーネントのビューが古い場合は、 unities（関数のconsole.logが正しい値を返す場合でも）。
希望します。
ありがとうございます。
[EDIT]
が最後にここに解決策を見つけた：https://easyusedev.wordpress.com/2015/11/06/dynamically-loading-polymer-elements-on-the-fly/
をコンポーネントは、私はビューを呼び出すたびにrefresedされていることを確認するためには、すべてがロードする準備ができていたときに、手動でコンポーネントを作成しますコンポーネント：
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 tu tiempoÁlvaro。
よろしくお願いいたします。
私はthis.notifyPath('tree', this.assets);をfullAssets()に入れていますが、構文が正しくないと思います。 docsから
：
notifyPath、を呼び出すとき、あなたがを変更正確なパスを使用する必要があります。 たとえば、プロファイルオブジェクト自体に が変更されていないため、this.notifyPath（ 'profile'）を呼び出すと がprofile.nameに変更されません。
したがって、このやろう：
this.notifyPath('tree.property_you_want_to_be_changed');
それともMutableData mixinを使用するのはあなた方が良いだろうし。このミックスインは、アレイを更新することを可能にすると、UIは、最初findeする
this.notifyPath('tree');
ありがとうArnau、私はそれに気付かなかった！私はこれからの発展のためにそれを念頭に置いていきます。どうもありがとう！ – al081570
試みをやってsimpley通知することでstackoverflowのhttps://stackoverflow.com/a/33371129/4921471あなたの答えのため –
感謝。実際、私はすでにそれを試みました。私は問題がDOMが変更されていないと思う、私の場合すべての新しいデータは既にロードされている – al081570
デモを入れて、あなたを助けるでしょう –