视口刷新后 Polymer DOM 更新

Question

我一直在努力解决这个问题，但到目前为止还没有找到答案。我的 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">

根据需要重新计算添加尽可能多的参数。然后，该计算函数应在任何时候至少有一个 paras 更改时返回有效源。

另外请记住，如果这些参数中的任何一个将变得未定义，则计算函数可能会完全忽略。解决此问题的方法是采用相反的方式 - 一个由许多观察者修改的属性，如下所示：

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