Skip to content

Instantly share code, notes, and snippets.

@jaypeeZero

jaypeeZero/app.js

Created June 10, 2012 02:04
Show Gist options
  • Save jaypeeZero/2903574 to your computer and use it in GitHub Desktop.
Save jaypeeZero/2903574 to your computer and use it in GitHub Desktop.
Download ZIP
Views unexpectedly leaving stack in BackStack
Raw
app.js
/// TEMPLATING ///
tpl = {
// Hash of preloaded templates for the app
templates: {},
// Recursively pre-load all the templates for the app.
// This implementation should be changed in a production environment. All the template files should be
// concatenated in a single file.
loadTemplates: function (names, callback) {
var that = this;
var loadTemplate = function (index) {
var name = names[index];
var data = $.ajax({ type: 'GET', url: 'templates/' + name + '.html', async: false }).responseText;
that.templates[name] = data;
index++;
if (index < names.length) {
loadTemplate(index);
} else {
callback();
}
};
loadTemplate(0);
},
// Get template by name from hash of preloaded templates
get:function (name) {
var temp = this.templates[name];
return temp;
}
};
// Initializing BackStack.StackNavigator for the #container div
var stackNavigator = new BackStack.StackNavigator({
el: '#container'
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/style.css">
<!-- Frameworks and Libraries -->
<script src="js/frameworksandlibraries/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/frameworksandlibraries/underscore.js" type="text/javascript" charset="utf-8"></script>
<script src="js/frameworksandlibraries/backbone.js" type="text/javascript" charset="utf-8"></script>
<script src="js/frameworksandlibraries/cordova-1.7.0rc1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/frameworksandlibraries/lawnchair.js" type="text/javascript" charset="utf-8"></script>
<script src="js/frameworksandlibraries/webkit-sqlite.js" type="text/javascript" charset="utf-8"></script>
<script src="js/frameworksandlibraries/callbacks.js" type="text/javascript" charset="utf-8"></script>
<script src="js/frameworksandlibraries/backstack.js" type="text/javascript" charset="utf-8"></script>
<!-- Our system files -->
<script src="js/views/splash.js" type="text/javascript" charset="utf-8"></script>
<script src="js/models/user.js" type="text/javascript" charset="utf-8"></script>
<script src="js/views/login.js" type="text/javascript" charset="utf-8"></script>
<script src="js/models/project.js" type="text/javascript" charset="utf-8"></script>
<script src="js/views/projectoverview.js" type="text/javascript" charset="utf-8"></script>
<script src="js/views/notes.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script> <!-- This should be loaded AFTER View and Model files -->
<!-- Functions specific to this page -->
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady(); //this is a desktop browser
}
}
var onDeviceReady = function() {
tpl.loadTemplates(['login', 'projectoverview', 'splash', 'notes', 'addproject', 'participants', 'addparticipant', 'tasks', 'addtask', 'timesheet', 'timeentry', 'attachments', 'addlink', 'uploaddocument', 'settings', 'usersettings', 'projectsettings'],
function () {
stackNavigator.on("viewChanging", function(e) {
console.log("view changing");
console.log(e);
}, false);
stackNavigator.on("viewChanged", function(e) {
console.log("view changed");
console.log(e);
}, false);
stackNavigator.on("viewActivate", function(e) {
console.log("view activated");
console.log(e);
}, false);
stackNavigator.on("viewDeactivate", function(e) {
console.log("view deactivated");
console.log(e);
}, false);
stackNavigator.pushView(SplashPage);
});
};
$(document).ready(function(){
// Runs before "onDeviceReady"
});
</script>
</head>
<body class="" onload="onBodyLoad()">
<div id="container">
index
</div>
</body>
</html>
Raw
notes.html
<div id="container">
Notes are here
</div>
Raw
notes.js
var NotesPage = Backbone.View.extend({
el: "#container",
initialize: function() {
this.template = _.template(tpl.get("notes"));
},
render: function() {
$(this.el).html(this.template({}));
return this;
}
});
Raw
projectoverview.html
<div id="container">
<div class="navbar boxheading"><h3>Overview</h3></div>
<div class="container">
<div class="row-fluid">
<div class="span2 btn-icon">
<a href="#notes" class="btn_icon square">
<img src="images/glyphicons/glyphicons_309_comments.png" />
<div>Notes</div>
</a>
</div>
<div class="span2 btn-icon">
<a href="#tasks" class="btn_icon square">
<img src="images/glyphicons/glyphicons_150_check.png" />
<div>Tasks</div>
</a>
</div>
</div>
</div>
</div>
Raw
projectoverview.js
var OverviewPage = Backbone.View.extend({
el: "#container",
events: {
"click a.btn_icon": "icon_clicked"
},
initialize: function() {
this.template = _.template(tpl.get("projectoverview")); // tpl is an object that grabs html files via jQuery .ajax function
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
},
icon_clicked: function(e) {
e.preventDefault();
switch (e.currentTarget.hash) {
case "#notes":
stackNavigator.pushView(new NotesPage({}));
break;
}
}
});
Raw
splash.html
Loading
<br />
<img src="css/images/ajax-loader.gif" />
Raw
splash.js
var SplashPage = Backbone.View.extend({
initialize:function(){
this.template = _.template(tpl.get("splash"));
},
render:function(){
$(this.el).html(this.template());
return this;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment