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

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

<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;
        }
    });
});

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


javascript html jquery jsrender jsviews
person Shesha    schedule 10.06.2016    source источник
comment
Этот ответ может помочь вам изменить размер окна. .com/questions/21626357/angularjs-event-on-window-innerwidth-size-change/21626400#21626400   -  person Ana Liza Pandac    schedule 10.06.2016

Ответы (2)


arrow_upward
1
arrow_downward

В вашем примере вы вызываете 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 имеет закомментированный подход к отказу, который вы можете использовать...

person BorisMoore    schedule 10.06.2016
comment
@Shesha: Тебе это помогло? - person BorisMoore; 15.06.2016

arrow_upward
0
arrow_downward

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

$(window).resize(function(){

        //Call the function here
    });
});
person Marcus Höglund    schedule 10.06.2016