Handlebars tests

by Christian Unigarro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="result">
output results here.
</div>

<script type="text/x-handlebars-template" id="item_tmpl">
		<ul id="results" class="pagination">
      <li class="{{#if lowerLimit}} disabled {{/if}}">
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
    
      {{#numberPage}}
        <li class="{{#if active}} active {{/if}}">
        	<a href="#">
          	{{#if n}}
            	{{ n }}
            {{else}}
            	<span aria-hidden="true">&laquo;</span>
            {{/if}}
          </a>
        </li>
      {{/numberPage}}

      <li class="{{#if upperLimit}} disabled {{/if}}">
        <a href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
    
    <div class="form-group">
    	<label class="control-label" for="selectText">
      	Ejemplo 
      </label>
      
      <select class="form-control" id="selectText">
      	{{#each SelectTest}}
        	<option {{#ifCond ../resultsSize this}} selected {{/ifCond}}>
          	{{ this }}
          </option>
        {{/each}}
      </select>
    </div>
</script>

CSS

img { max-width: 100px; }

JavaScript

$(document).ready(function() {
  var dataObject = {
    numberPage:[
      {n:1, active:true},
      {n:2, active:false},
      {n:3, active:false},
    ],
    lowerLimit: true,
    upperLimit: false,
    SelectTest: [5, 20, 30, 40, 50],
    resultsSize: 20
  };

  var tpl_source = $("#item_tmpl").html();
  var template = Handlebars.compile(tpl_source);
  
  Handlebars.registerHelper('ifCond', function(val1,val2, options) {
  		if (val1 === val2) {
      	return options.fn(this);
      }
  });
  
  var content = template(dataObject);

  // output
  var $result = $(".result");
  $result.html(content);
});