наблюдаемые против методов визуализации jsviews

Question

Exist: 2500 объектов-объектов массива. Рендер метод взял 1347.783ms

I`ve пытался оптимизировать сроки с помощью метода $ .observable (массив) .refresh() и он принимает: 3382.213ms

What`s лучший способ обновить вид? Я думал, что метод 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), то вы заменяете весь bets массив с новым newBets массива, так что все содержание этого {{for}} блока будет полностью перерисовываться и повторно соединяться - это будет так же медленно, как исходный рендеринг.

Если изменение в массив является инкрементным, и может быть выражено в терминах одного или нескольких insert или remove операций, то это позволит JsViews знать, что только добавлять/удалять/перемещены элементы должны быть повторно вынесено, и это будет намного быстрее. Move операции были оптимизированы в недавнем обновлении.

См http://www.jsviews.com/#arrchange

Для более сложных изменений в массивы, вы можете использовать compiled View Models и использовать функцию merge(). Начиная с недавнего обновления (78) операция merge() была оптимизирована и обычно намного быстрее (в том числе для массивов) при условии, что вы определяете идентификатор, с помощью поля первичного ключа или аналогичного. См. http://www.jsviews.com/#jsvviewmodelsapi@mergeadvsample.