xfry/Index.html

## app.js
// We use an "Immediate Function" to initialize the application to avoid leaving anything behind in the global scope
(function () {

  /* ---------------------------------- Local Variables ---------------------------------- */
  var service = new EmployeeService();
  var homeTpl = Handlebars.compile($('#home-tpl').html());
  var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());
  service.initialize().done(function () {
    renderHomeView();
  });

  /* --------------------------------- Event Registration -------------------------------- */

  /*  $('.search-key').on('keyup', findByName);
    $('.help-btn').on('click', function() {
      alert("Employee Directory v3.4");
    });*/

  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body); //eliminar los 300ms de carga de los alerts
  }, false);

  /* ---------------------------------- Local Functions ---------------------------------- */
  function findByName() {
    service.findByName($('.search-key').val()).done(function (employees) {
      /*var l = employees.length;
      var e;
      $('.employee-list').empty();
      for (var i = 0; i < l; i++) {
        e = employees[i];
        $('.employee-list').append('<li><a href="#employees/' + e.id + '">' + e.firstName + ' ' + e.lastName + '</a></li>');
      }*/
      $(".content").html(employeeListTpl(employees));
    });
  };

  function renderHomeView() {
    $('body').html(homeTpl());
    $('.search-key').on('keyup', findByName);
  };

}());

## Index.html
<body>
<script id="home-tpl" type="text/template">
  <header class="bar bar-nav">
    <h1 class="title-directory">Directory</h1>
  </header>
  <div class="bar bar-standard bar-header-secondary">
    <input class='search-key' type="search"/>
  </div>
  <div class="content"></div>
</script>

<script id="employee-list-tpl" type="text/template">
  <ul class="table-view">
    {{#each this}}
      <li class="table-view-cell media">
        <a href="employees/{{id}}">
          <img class="media-object pull-left" src="assets/pics/{{pic}}">
          <div class="media-body">
            {{firstName}} {{lastName}}
            <p>{{title}}</p>
          </div>
        </a>
      </li>
    {{/each}}
  </ul>
</script>

<script type="text/javascript" src="cordova.js"></script>
<script src="lib/jquery.js"></script>
<script src="js/services/memory/EmployeeService.js"></script>
<script type="text/javascript" src="lib/fastclick.js"></script>
<script type="text/javascript" src="lib/handlebars.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
  //This should be included at: cordova.js not here.
  document.addEventListener('deviceready', function() {
    if (navigator.notification) {
      //sobre escribir notificacion Alert de javascript por notificaciones nativas
      window.alert = function(message) {
        navigator.notification.alert(
          message,    //message
          null,       //callback
          "Workshop", //title
          "Ok"        //button name
        );
      };
    }
  }, false);//fin sobreescritura de alert
</script>
	// We use an "Immediate Function" to initialize the application to avoid leaving anything behind in the global scope
	(function () {

	/* ---------------------------------- Local Variables ---------------------------------- */
	var service = new EmployeeService();
	var homeTpl = Handlebars.compile($('#home-tpl').html());
	var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());
	service.initialize().done(function () {
	renderHomeView();
	});

	/* --------------------------------- Event Registration -------------------------------- */

	/* $('.search-key').on('keyup', findByName);
	$('.help-btn').on('click', function() {
	alert("Employee Directory v3.4");
	});*/

	document.addEventListener('DOMContentLoaded', function() {
	FastClick.attach(document.body); //eliminar los 300ms de carga de los alerts
	}, false);

	/* ---------------------------------- Local Functions ---------------------------------- */
	function findByName() {
	service.findByName($('.search-key').val()).done(function (employees) {
	/*var l = employees.length;
	var e;
	$('.employee-list').empty();
	for (var i = 0; i < l; i++) {
	e = employees[i];
	$('.employee-list').append('<li><a href="#employees/' + e.id + '">' + e.firstName + ' ' + e.lastName + '</a></li>');
	}*/
	$(".content").html(employeeListTpl(employees));
	});
	};

	function renderHomeView() {
	$('body').html(homeTpl());
	$('.search-key').on('keyup', findByName);
	};

	}());
	<body>
	<script id="home-tpl" type="text/template">
	<header class="bar bar-nav">
	<h1 class="title-directory">Directory</h1>
	</header>
	<div class="bar bar-standard bar-header-secondary">
	<input class='search-key' type="search"/>
	</div>
	<div class="content"></div>
	</script>

	<script id="employee-list-tpl" type="text/template">
	<ul class="table-view">
	{{#each this}}
	<li class="table-view-cell media">
	<a href="employees/{{id}}">
	<img class="media-object pull-left" src="assets/pics/{{pic}}">
	<div class="media-body">
	{{firstName}} {{lastName}}
	<p>{{title}}</p>
	</div>
	</a>
	</li>
	{{/each}}
	</ul>
	</script>

	<script type="text/javascript" src="cordova.js"></script>
	<script src="lib/jquery.js"></script>
	<script src="js/services/memory/EmployeeService.js"></script>
	<script type="text/javascript" src="lib/fastclick.js"></script>
	<script type="text/javascript" src="lib/handlebars.js"></script>
	<script src="js/app.js"></script>
	<script type="text/javascript">
	//This should be included at: cordova.js not here.
	document.addEventListener('deviceready', function() {
	if (navigator.notification) {
	//sobre escribir notificacion Alert de javascript por notificaciones nativas
	window.alert = function(message) {
	navigator.notification.alert(
	message, //message
	null, //callback
	"Workshop", //title
	"Ok" //button name
	);
	};
	}
	}, false);//fin sobreescritura de alert
	</script>