視口刷新後聚合物DOM更新

Question

我一直在努力解決這個問題，但是沙發一直無法找到答案。我的聚合物元素加載一個基本模板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重複的項目源，這樣的事情：

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

添加儘可能多的PARAMS爲您需要重新計算。然後該計算函數應該隨時返回一個有效的源，至少有一個para變化。

還請記住，如果這些參數中的任何一個將變得不確定，那麼計算函數可能會完全忽略。解決這個問題的方法正好相反 - 從曼尼觀察員那裏修改的一個屬性，如下所示：

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