可观察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。