Javascript 视口刷新后的DOM更新

我一直在想办法解决这个问题，但迄今为止还没有找到答案。MyPolymer元素加载一个基本模板JSON文件，然后通过

dom repeat

运行该文件以创建一个基本HTML页面。 然后加载另一个JSON文本文件，该文件使用JS函数完成HTML的各个区域。 在单击按钮form child时，将运行一个函数，该函数将触发加载另一个JSON文件，该文件将添加其他信息。这一切都很好。 但是，当我离开页面并返回页面时，它会记住我的所有设置，但无法正确显示内容。它很好地显示了

translatedText

，html代码就在那里，但它没有完成

原始文本的html代码

它似乎希望在正确呈现DOM之前加载最后一个JSON文件。所以我想让它刷新整个DOM，但是我该怎么做呢

我的MWE：

<template>
<iron-ajax
      auto
      url="basetext.json"
      handle-as="json"
      last-response="{{baseText}}"></iron-ajax>

  <div class="textcontent">
      <template is="dom-repeat" items="{{baseText.lines}}" as="line">
        <div class="lineblock">
            <div class="line" id="line{{line.lineid}}" inner-h-t-m-l="{{line.linetext}}"></div>
              <template is="dom-if" if="[[extraShowEnabled]]">
                      <div class="linepi" id='linepi{{line.lineid}}' inner-h-t-m-l="{{line.linetext}}"></div>
              </template>
        </div>
      </template>
  </div>

  <template is="dom-if" if="[[extraLoadEnabled]]">
      <iron-ajax
              auto
              url="originaltext.json"
              handle-as="json"
              last-response="{{originalText}}"></iron-ajax>
  </template>

<iron-ajax
      auto
      url="translatedtext.json"
      handle-as="json"
      last-response="{{translatedText}}"></iron-ajax>
</template>


<script>
    Polymer({
      is: 'text-page',

      properties: {
        translatedText: Object,
        originalText: Object,
        extraShowEnabled: {
          type: Boolean,
          value: false
        },
        extraLoadEnabled: {
          type: Boolean,
          value: false
        },
        showViewer: {
          type: String,
          value: "none"
        }
      },
      observers: [
       'setView(showViewer)',
       ' _computeSegments(translatedText,".line")',
       ' _computeSegments(originalText,".linepi")'
      ],
      ready: function() {
        this.addEventListener('eventFromChild', this.changeView);
      },
      changeView: function(event) {
        this.showViewer = event.detail.selectedView;
      },
      setView: function(showViewer) {
        \\ first some code here to reset all css.

        if (showViewer === "none") {
          this.extraShowEnabled = false;
          this.extraLoadEnabled = false;
        }
        if (showViewer === "sidebyside") {
          this.extraShowEnabled = true;
          this.extraLoadEnabled = true;
          this._computeSegments(this.originalText,".linepi");
          this._addSideBySideCode();
        }
      },
      _computeSegments: function(inputText,linetype) {
        if (inputText) {
          Array.from(this.querySelectorAll(linetype+" sc-segment")).forEach(item => item.innerHTML = inputText.segments[item.id]);
        }
      },
      _addSideBySideCode: function() {
        \\ this function just adds some css.
        },
    });
</script>


聚合物({
是：'文本页'，
特性：{
translatedText:对象，
原文：对象，
extraShowEnabled：{
类型：布尔型，
值：false
},
已启用外部加载：{
类型：布尔型，
值：false
},
showViewer：{
类型：字符串，
值：“无”
}
},
观察员：[
“设置视图（showViewer）”，
“_computeSegments（translatedText，“.line”）”，
“_计算段（原始文本，.linepi”）”
],
就绪：函数（）{
this.addEventListener（'eventFromChild'，this.changeView）；
},
changeView:功能（事件）{
this.showViewer=event.detail.selectedView；
},
setView:函数（showViewer）{
\\首先，这里有一些重置所有css的代码。
如果（showViewer==“无”）{
this.extraShowEnabled=false；
this.extraLoadEnabled=false；
}
如果（showViewer==“侧边”）{
this.extraShowEnabled=true；
this.extraLoadEnabled=true；
本._计算段（本.originalText，.linepi）；
这是。_addSideBySideCode（）；
}
},
_计算段：函数（输入文本，线型）{
如果（输入文本）{
from（this.querySelectorAll（linetype+“sc段”））.forEach（item=>item.innerHTML=inputText.segments[item.id]）；
}
},
_addSideBySideCode:function（）{
\\这个函数只是添加了一些css。
},
});
我认为您应该尝试使用计算函数结果作为dom重复项源，如下所示：

<template is="dom-repeat" items="{{itmesByParamsCompute(baseText, originalText, translatedText, extraloadEnabled, ...)}}" as="line">

properties: {
   items_to_use: {
      type: Array,
      value: []
   },
   translatedText: {
      type: Object,
      observer: 'updateItemsToUse'
   },
   originalText: {
      type: Object,
      observer: 'updateItemsToUse'
   }
},
updateItemsToUse: function (data) {
    let updatedArray = this.someMixFixFunction(this.item_to_use, data);
    this.set('items_to_use', updatedArray);
},
someMixFixFunction: function (old_array, data_to_apply) {
   // do some merging or what ever You need here, for example
   let updatedArray = old_array.concat(data_to_apply);

   return updatedArray;
}