在加载和调整大小时调用 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

在您的示例中，您将在 JsRender 渲染期间调用 checkDevice，因此除非您在调整窗口大小时触发渲染刷新，否则它不会被重新评估，这对性能不利。

更好的方法是从 resize 事件中的窗口驱动可观察的width或height属性。

$(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 有一个注释掉的去抖动方法，您可以使用...

Answer 2

你可以

像这样使用 jQuery 将事件绑定到窗口大小调整

$(window).resize(function(){
        //Call the function here
    });
});