backbone-jqmobile Basic page demo
HTML
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css">
<script src="https://raw.github.com/jumpbytehq/backbone-jqmobile/master/test/lib/backbone/underscore-1.3.3.min.js"></script>
<script src="https://raw.github.com/jumpbytehq/backbone-jqmobile/master/test/lib/backbone/backbone-0.9.2.min.js"></script>
<script src="https://raw.github.com/jumpbytehq/backbone-jqmobile/master/dist/backbone-jqmobile.js"></script>
<div id="appContainer">
<!-- Required for jquery mobile to determine which DIV is root for Jquery Mobile -->
<div class="dummy" data-role="page"></div>
</div>
JavaScript
app = new jumpui.JqmApp({
platform: jumpui.Platform.WEB,
containerEl: '#appContainer',
templateEngine: new jumpui.template.engine.Handlebars()
});
var demoPage = new jumpui.Page({
name:"Demo",
route:"demo",
blocks:{
'header':new jumpui.block.Header({
getContent:function(){
return '<h3>Demo</h3>';
}
}),
'content':new jumpui.block.Content({
getContent:function(){
return '<p>' + this.model.text + '</p>'
}
}),
'footer':new jumpui.block.Footer({
getContent:function(){
return '<h3>' + this.model.text + '</h3>'
}
})
},
prepare:function(){
this.model={'text':'hello world'};
return true;
}
});
app.addPage(demoPage);
setTimeout(function(){
app.load();
app.navigate('demo');
console.log('application loaded, and nav to demo')
},1000);