嵌套的Knockout.js模板，性能不佳

Question

我使用剔除模板來表示表格數據，同時保持以自然方式操縱和設置“行”和“列”的自由。

我的行上有一個foreach綁定，每一行都包含一個變量，該變量具有應使用的行模板的名稱。

我使用另一個foreach綁定來遍歷每一行中的單元格，每個單元格都有一個包含其模板名稱的變量。

這樣就產生了高度可定制的表，我可以在我的應用程序中使用它們並減少代碼重復-我很樂意繼續這樣做。

---

當代表多於幾行的表（15行x 5列需要約1000ms的渲染時間）時，我遇到了性能問題。

我認為創建表不是問題，我嘗試以推薦的方式做到這一點，例如添加到基本數組和調用valueHasMutated 。

任何重新渲染都會觸發延遲。 重新渲染的原因很難預測，我曾經在可見性切換甚至是對不相關的可觀察字符串的簡單更新中發生過。

有什么我可以做的，以使這些模板更高效？ 我在一些處理模板的敲除腳本中設置了斷點，可以看到它更新了每個單元格和行的圖形之間的dom。

Answer 1

組件的使用方式與模板非常相似。 組件通常帶有ViewModel參數，但是如果在綁定中提供有params屬性，則組件可以不帶任何params 。

組件是異步加載的，似乎只渲染一次，而不是n = row x col次。 對於我最大的桌子，這已將渲染時間從7s減少到不到1s，我認為我的瓶頸現在不存在了。

示例模板：

<div class="grid-body" data-bind="foreach: Rows">
  <!-- ko template: { name: 'DefaultCellTemplate', data: Cells } -->
  <!-- /ko -->
</div>

轉換為組件

<div class="grid-body" data-bind="foreach: Rows">
  <!-- ko component: { name: 'DefaultCellTemplate', params: Cells } -->
  <!-- /ko -->
</div>

不能使用特殊的腳本標簽來定義模板，而必須使用ko.components.register()添加組件，然后才能使用它們。

示例模板標記

<script id="DefaultCellTemplate" type="text/html">
  <span data-bind="text: $data"></span>
</script>

轉換為ko.components.register

ko.components.register('DefaultCellTemplate', {
  template: '<span data-bind="text: $data"></span>'
});