Вызов метода jsRender при загрузке и изменении размера

Question

Я проверяю ширину устройства и показываю некоторую опцию в меню. Мне нужно проверить это во время загрузки и изменения размера страницы. Потому что мне нужно проверить устройства в портретном и альбомном представлении.

<script type="text/x-jsrender" id="option"> 
<ul class="dropdown-menu" role="menu"> 
{{if ~checkDevice()}} 
     <li> 
       <span class="btn"></span> 
       Show 
     </li> 
{{/if}} 
<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
$.views.helpers({ 
     checkDevice: function() { 
      return window.innerWidth > 450; 
     } 
    }); 
}); 

Это нормально работает при нагрузке. Как проверить это, если условие изменения размера?

Answer 1

Вы можете связать события в окне изменения размера с JQuery, как этот

$(window).resize(function(){ 

     //Call the function here 
    }); 
}); 

Answer 2

В вашем примере вы звоните в checkDevice во время рендеринга JsRender, поэтому он не будет получать повторную оценку, если не запустить обновление отрисовки при изменении размера окна, что не подходит для производительности.

Лучшим подходом было бы управлять наблюдаемым width или height объектом из окна onResize события.

$(window).resize(function() { 
    $.observable(data).setProperty("width", window.innerWidth); 
}); 

Затем связать ваш шаблон значений width или height.

Вот рабочий jsfiddle: https://jsfiddle.net/BorisMoore/nm6Ljxph/

который использует

<script id="tmpl" type="text/x-jsrender"> 

Window width: {^{:width}} 

<table><tbody> 
    {^{if width<400 }} 
    <tr><td>{{:first}}</td></tr><tr><td>{{:last}}</td></tr> 
    {{else}} 
    <tr><td>{{:first}}</td><td>{{:last}}</td></tr> 
    {{/if}} 
</tbody></table> 

</script> 

Вы можете в дальнейшем производительность справки с помощью дросселирования или дребезга. Jsfiddle имеет прокомментированный подход к отказу, который вы можете использовать ...