Skip to content

Instantly share code, notes, and snippets.

@kirbysayshi

kirbysayshi/app.js

Created April 22, 2011 23:38
Show Gist options
  • Save kirbysayshi/937951 to your computer and use it in GitHub Desktop.
Save kirbysayshi/937951 to your computer and use it in GitHub Desktop.
Download ZIP
troubleshooting spine.js
Raw
app.js
$(function(){
App = Spine.Controller.create({
el: $('body')
,elements: {
'#home': '$home'
,'#step-1': '$step1'
,'#step-2': '$step2'
,'#step-3': '$step3'
}
,events: {
'click .nextStep': 'nextStep'
}
,init: function(){
this.routes({
'/step/:num': function(num){
this.hideAllPages();
this['$step' + num].show();
console.log('navigating to /step/' + num);
}
,'/home': function(){
this.hideAllPages();
this.$home.show();
}
});
console.log('App init');
this.navigate('/home');
}
,nextStep: function(e){
console.log('click', arguments);
var $el = $(e.target);
// 'this' is the controller
this.navigate($el.attr('href').replace('-', '/'));
return false;
}
,hideAllPages: function(){
this.$home.hide();
this.$step1.hide();
this.$step2.hide();
this.$step3.hide();
}
});
// sets up initial routing
Spine.Route.setup();
App = App.init();
// also tried:
// var App = App.inst();
});
Raw
spineapp.html
<!DOCTYPE html>
<html>
<head>
<title>Spine test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://github.com/maccman/spine/raw/master/spine.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="spine.route.js" type="text/javascript" charset="utf-8"></script>-->
<script src="https://github.com/maccman/spine/raw/master/lib/spine.model.ajax.js" type="text/javascript" charset="utf-8"></script>
<script src="https://github.com/maccman/spine/raw/master/lib/spine.route.js" type="text/javascript" charset="utf-8"></script>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
.step { display: none; }
</style>
</head>
<body>
<div id="home" class="step">
<p>This is the home page.</p>
<a class="nextStep" href="#step-1">To Next step</a>
</div>
<div id="step-1" class="step">
<p>This is step <span class="stepNum">1</span>.</p>
<a class="nextStep" href="#step-2">To Next step</a>
</div>
<div id="step-2" class="step">
<p>This is step <span class="stepNum">2</span>.</p>
<a class="nextStep" href="#step-3">To Next step:</a>
</div>
<div id="step-3" class="step">
<p>This is step <span class="stepNum">3</span>.</p>
<a class="nextStep" href="#home">To Next step:</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment