[英]Call jsRender method on load and on resize
我正在检查设备宽度并在菜单中显示一些选项。 我需要在页面加载和调整大小时进行检查。 因为我需要以纵向和横向视图签入设备。
<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);
});
然后将您的模板绑定到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具有注释掉的去抖动方法,您可以使用...
您可以像这样用jQuery将事件绑定到窗口调整大小
$(window).resize(function(){
//Call the function here
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.