我正在检查设备宽度并在菜单中显示一些选项。我需要在页面加载和调整大小时检查这一点。因为我需要以纵向和横向 View checkin 设备。
<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;
}
});
});
这在加载时可以正常工作。如何检查调整大小的条件?
最佳答案
在您的示例中,您在 JsRender 渲染期间调用 checkDevice,因此它不会被重新评估,除非您在窗口调整大小时触发渲染刷新,这对性能不利。
更好的方法是从窗口 onResize 事件驱动可观察的 width
或 height
属性。
$(window).resize(function () {
$.observable(data).setProperty("width", window.innerWidth);
});
然后将模板绑定(bind)到宽度
或高度
值。
这是一个工作中的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 有一个注释掉的去抖方法,您可以使用...
关于javascript - 在加载和调整大小时调用 jsRender 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37744403/