视口刷新后的聚合物 DOM 更新

Question

我一直在努力解决这个问题，但到目前为止一直找不到答案。My Polymer 元素加载一个基本模板 JSON 文件，然后通过dom-repeat运行该文件以创建基本的 HTML 页面。然后加载另一个JSON文本文件，该文件使用JS函数完成HTML的各个区域。单击窗体子项按钮后，将运行一个函数，该函数会触发另一个添加其他信息的 JSON 文件的加载。这一切都很好用。但是当我离开页面并返回页面时，它已经记住了我的所有设置，但没有正确显示内容。它很好地显示了translatedText并且 html 代码在那里，但它没有完成originalText的 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>

Answer 1

我认为您应该尝试使用计算函数结果作为 dom-repeat 项目源，如下所示：

<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;
}