phonegap + jquery + app-UI + dust.js + fastclick.js

app.js

var App = App || {};

App.UI = (function ($) {
  var module = {};

  function Template(options) {
    var defaults = {
      cache: {}
      , nav: {target: document.body, backLabel: "Back"}
      , templatesDir: "templates"
    };

    if (typeof options == "undefined") options = {};
    this.options = $.extend(true, {}, defaults, options);
    this.viewNavigator = new ViewNavigator(this.options.nav.target, {useNoClickDelay: false});
  }

  Template.prototype.constructor = Template;

  Template.prototype.render = function(template, params, callback) {
    var self = this;
    if (this.isCached(template)) {
      dust.render(template, params, callback);
    } else {
      $.get(this.urlFor(template), function (raw) {
        self.store(template, raw);
        self.render(template, params, callback);
      });
    }
  };

  Template.prototype.isCached = function (template) {
    return !!this.options.cache[template];
  };

  Template.prototype.store = function (template, raw) {
    var compiled = dust.compile(raw, template);
    dust.loadSource(compiled);
    this.options.cache[template] = raw;
  };

  Template.prototype.fetch = function (template) {
    if (!this.isCached(template)) {
      var raw = $.ajax({url: this.urlFor(template), async: false}).responseText;
      this.store(template, raw);
    }
  };

  Template.prototype.urlFor = function (template) {
    return this.options.templatesDir + "/" + template;
  };

  Template.prototype.renderSync = function (template, params, callback) {
    if (!this.isCached(template)) {
      this.fetch(template);
    }
    this.render(template, params, callback);
  };

  Template.prototype.prefetch = function (template) {
    var self = this;
    $.get(this.urlFor(template), function (raw) {
      self.store(template, raw);
    });
  };

  Template.prototype.push = function (template, nav, params) {
    if (!this.isCached(template)) {
      this.fetch(template);
    }

    var self = this
      , title = nav.title || ""
      , backLabel = nav.backLabel || null;

    dust.render(template, params, function (err, out) {
      self.viewNavigator.pushView({title: title, backLabel: backLabel, view: $(out)});
      // https://github.com/ftlabs/fastclick
      FastClick.attach(self.options.nav.target);
      if (err) throw new Error("push(): dust.render(): " + err);
    });
  };

  Template.prototype.pop = function () {
    this.viewNavigator.popView();
  };

  module.Template = Template;

  return module;
}(window.jQuery));

App.Bootstrap = (function ($) {
  var module = {}
    , online = navigator.onLine || false
    , localStorage
    , t;

  function _checkConnection() {
    var networkState = navigator.connection.type
      , states = {};

    states[Connection.UNKNOWN] = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI] = 'WiFi connection';
    states[Connection.CELL_2G] = 'Cell 2G connection';
    states[Connection.CELL_3G] = 'Cell 3G connection';
    states[Connection.CELL_4G] = 'Cell 4G connection';
    states[Connection.NONE] = 'No network connection';

    if (networkState !== Connection.NONE) {
      online = true;
    }
  }

  function _onDeviceReady() {
    isOnline();
    storage();
    template();
  }

  function start() {
    _onDeviceReady();
  }

  function isOnline() {
    _checkConnection();
    return online;
  }

  function storage() {
    if (typeof localStorage === "undefined") localStorage = window.localStorage;
    return localStorage;
  }

  function template() {
    if (typeof t === "undefined") t = new App.UI.Template();
    return t;
  }

  module.start = start;
  module.isOnline = isOnline;
  module.storage = storage;
  module.template = template;

  return module;
}(window.jQuery));

/** initialize phonegap **/
$(function () {
  $(document).on("deviceready", function () {
    App.Bootstrap.start();
  });
});

dashboard.html

<div>
  {#apps}
  <div class="dashboard-app-image">
    <a href="{app_url}"><img src="{app_image}" alt="" /></a>
  </div>
  {/apps}
</div>

dashboard.js

$(function () {
  $(document).on("deviceready", function () {
    if (App.Bootstrap.isOnline()) {
      App.UneDashboard.drawAppsList();
    }
  });
});

App.Dashboard = (function ($) {
  var module = {};

  function _loadApp(e) {
    e.preventDefault();

    if (!App.Login.isLoggedIn()) {
      App.Bootstrap.template().push("login.html", {title: "Login", backLabel: "Atras"});
      return;
    }

    var $target = $(e.target) // <img>
      , href = $target.parent().attr("href"); // <a>

    if (href) {
      window.location.href = href;
    }
  }

  function _onSucess(data, textStatus, jqXHR) {
    if (!data) throw new Error("_onSucess(): data seems empty");
    App.Bootstrap.template().push("dashboard.html", {title: "Dashboard", backLabel: null}, {apps: data});

    // add a global listener.
    $(document).on(
      // "click",
      "touchstart",
      ".dashboard-app-image a",
      $.proxy(_loadApp, this)
    );
  }

  function drawAppsList() {
    getAppsList();
  }

  // TODO: add other ajax callbacks (jfas).
  function getAppsList(successCallback) {
    if (typeof successCallback === "undefined") successCallback = _onSucess;

    $.ajax({
      url: App.CONFIG.SERVICES_URL + "/apps_list",
      dataType: "jsonp",
      crossDomain: true,
      success: successCallback
    });
  }

  module.drawAppsList = drawAppsList;
  module.getAppsList = getAppsList;

  return module;
}(window.jQuery));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" /> -->
    <link rel="stylesheet" type="text/css" href="css/viewnavigator.css" />
    <title>UNE</title>
    <script type="text/javascript" src="js/vendor/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/vendor/jquery-migrate-1.1.1.min.js"></script>
    <script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/vendor/cordova-2.5.0.js"></script>
    <script type="text/javascript" src="js/vendor/jquery.form.js"></script>
    <!-- <script type="text/javascript" src="js/vendor/holder.js"></script> -->
    <script type="text/javascript" src="js/vendor/fastclick.js"></script>
    <script type="text/javascript" src="js/vendor/jquery.animate-enhanced.min.js"></script>
    <script type="text/javascript" src="js/vendor/iscroll.js"></script>
    <script type="text/javascript" src="js/vendor/viewnavigator.js"></script>
    <script type="text/javascript" src="js/vendor/dust-full-1.2.2.js"></script>
    <script type="text/javascript" src="js/config.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/dashboard.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
  </head>
  <body></body>
</html>