可觀察vs渲染方法jsviews

Question

存在：2500個數組對象項。 Render方法把1347.783ms

I`ve試圖優化使用$ .observable（陣列）.REFRESH（）方法的定時和花費：3382.213ms

什麼`的最佳方式來更新視圖？我認爲refresh（）方法隻影響不多的變化項目。

模板：

<script id="betTMPL" type="text/x-jsrender"> 
 
<div class="bet_group"> 
 
    <div class="bet-title {{if hideGroup}}min{{/if}}" id="group_{{:groupID}}" data-gid="{{:groupID}}" data-gameid="{{:gameID}}"> 
 
     <div class="groupName">{^{:groupName}} 
 
      <span id="kolG_{{:groupID}}" {{if !hideGroup}}style="display: none;"{{/if}}> ({{:betsLen}})</span> 
 
      {^{if allowMyMarkets}} 
 
       {^{if actionMyMarket}} 
 
        <span class="addToMarket" title="<?=__('Add')?>"></span> 
 
       {{else}} 
 
        <span class="addToMarket active" title="<?=__('Del')?>"></span> 
 
       {{/if}} 
 
      {{/if}} 
 
     </div> 
 
    </div> 
 
    <div class="bets" {{if hideGroup}}style="display: none"{{/if}}> 
 
     {^{for bets ~cols=cols ~mainGame=mainGame ~idd=idd ~gameID=gameID ~groupID=groupID}} 
 

 
      {{if !(#getIndex() % (~cols))}} 
 
       {{if #getIndex() != 0}} 
 
        </div> 
 
       {{/if}} 
 
       <div> 
 
      {{/if}} 
 

 
      {^{if #data}} 
 
       <div id="z_{{:T}}"> 
 
        <span class="bet_type {{:spanBetClass}}">{^{:betName}} 
 
         <span class="koeff {{:classLight}}" 
 
           {{if ~mainGame}}mainGame="{{:~mainGame}}"{{/if}} 
 
           {{if DopName}}dopName="{{:DopName}}"{{/if}} 
 
           bl="{{:B}}" 
 
           u="{{:~idd}}" 
 
           idgamecfg="{{:~gameID}}" 
 
           v="{{:sobID}}" 
 
           g="{{:~groupID}}" 
 
           d="{{:P}}" 
 
           dn="upcoming_events" 
 
           pl="{{:Pl.Id}}" 
 
           data-type="{{:T}}" 
 
           data-coef="{{:C}}" 
 
           id="b_{{:newID}}"><i>{^{:CV}}</i></span> 
 
        </span> 
 
       </div> 
 
      {{else}} 
 
       <div>&nbsp</div> 
 
      {{/if}} 
 

 
      {{if #getIndex() == #get("array").data.length - 1}} 
 
       </div> 
 
      {{/if}} 
 
     {{/for}} 
 
    </div> 
 
</div> 
 
</script>

Answer 1

如果你有{^{for bets ...}}...{{/for}}和你打電話$.observable(bets).refresh(newBets)那麼你有一個新的newBets陣列更換整個bets陣列，使{{for}}塊的全部內容將完全重新渲染並重新鏈接 - 這將與原始渲染一樣慢。

如果換到陣是漸進的，並且可以在一個或多個insert或remove操作來表示，那麼將允許JsViews知道，只有添加/刪除/移動的項目應該被重新渲染，它會更快。 Move操作已在最近的更新中進行了優化。

見http://www.jsviews.com/#arrchange

對於更復雜的變化陣列，您可以使用compiled View Models，並使用merge()功能。自從最近一次更新（78）以來，merge（）操作已經得到了優化，並且通常要快得多（包括用於數組），只要您通過主鍵字段或類似字段來定義身份。見http://www.jsviews.com/#jsvviewmodelsapi@mergeadvsample。