Bind to window resize

See: http://stackoverflow.com/questions/37744403/call-jsrender-method-on-load-and-on-resize

by BorisMoore

HTML

<script src="//www.jsviews.com/download/jsviews.js"></script>
<div id="result"></div>

<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>

CSS

td { border: 1px solid blue; padding: 50px;}

JavaScript

//http://stackoverflow.com/questions/37744403/call-jsrender-method-on-load-and-on-resize

$(window).resize(function () {
  $.observable(data).setProperty("width", window.innerWidth);
});

var tmpl = $.templates("#tmpl");

var data = {first:"Jo", last: "Jones", width: window.innerWidth};

tmpl.link("#result", data);

// Could use debounce or throttle, e.g.:
//function debounce(func, wait, scope) {
//  var timeout;
//  return function () {
//      var context = scope || this, args = arguments;
//      var later = function () {
//          timeout = null;
//          func.apply(context, args);
//      };
//      clearTimeout(timeout);
//      timeout = setTimeout(later, wait);
//  };
//}

//$(window).on('resize', debounce(function () {
//  $.observable(data).setProperty("width", window.innerWidth);
//}, 10));