調用負載jsRender方法和調整大小

我正在檢查設備寬度並在菜單中顯示一些選項。我需要檢查此頁面加載和調整大小。因爲我需要在縱向和橫向視圖中檢查設備。調用負載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; 
     } 
    }); 
});

這在加載時正常工作。如何檢查這個如果調整大小的條件？

來源

2016-06-10 Shesha

這個答案可能會幫助你調整窗口大小[http://stackoverflow.com/questions/21626357/angularjs-event-on-window-innerwidth-size - 改變/ 21626400＃21626400]（http://stackoverflow.com/questions/21626357/angularjs-event-on-window-innerwidth-size-change/21626400#21626400） –

您可以將事件綁定到窗口使用jQuery調整這樣

$(window).resize(function(){ 

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

來源

2016-06-10 09:25:37

在你的榜樣，你是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有一個註釋掉去抖動的方法，你可以使用...

來源

2016-06-10 18:32:11 BorisMoore

@Shesha：有幫助嗎？ – BorisMoore

調用負載jsRender方法和調整大小

回答

相關問題