Skip to content

Instantly share code, notes, and snippets.

@puleos

puleos/gist:5620456

Last active December 17, 2015 13:49
Show Gist options
  • Save puleos/5620456 to your computer and use it in GitHub Desktop.
Save puleos/5620456 to your computer and use it in GitHub Desktop.
Download ZIP
Web Application Exercise
Raw
gistfile1.txt
var App = new Marionette.Application();
App.addRegions({
"content": "#content",
"navigation": "#navigation",
});
App.on("initialize:after", function() {
Backbone.history.start();
});
App.module("Module", function(Mod, App, Backbone, Marionette, $, _){
// Define Models to Represent our application state
// --------------------------------------
Mod.QueryModel = Backbone.Model.extend({
defaults: {
keywords: "",
searchOptions: []
}
});
Mod.SearchResults = Backbone.Collection.extend({
url: "",
initialize: function(){
},
parse: function(res){
}
});
// Define a Views to render our templates
// --------------------------------------
Mod.HomeView = Marionette.ItemView.extend({
template: "#home-template"
});
Mod.NavigationView = Marionette.ItemView.extend({
template: "#navigation-template",
events: {
'keypress #search-input' : 'searchKeywords',
},
searchKeywords: function(e){
if ( typeof e.keyCode == 'undefined' || e.keyCode == 13) {
var keywords = $(e.target).val();
if(keywords === '') return;
this.model.set({keywords: keywords});
}
}
});
Mod.SearchResultItem = Marionette.ItemView.extend({
tagName: "li",
template: "#search-result-item-template"
});
Mod.SearchResultCompositeView = Marionette.CompositeView.extend({
template: "#search-result-template",
itemView: Mod.SearchResultItem,
itemViewContainer: "ul",
tagName: "ul"
});
// Define a controller to run this module
// --------------------------------------
var Router = Marionette.AppRouter.extend({
appRoutes: {
"": "home",
"search/:keywords": "search"
}
});
var Controller = Marionette.Controller.extend({
start: function(){
this.queryModel = new Mod.QueryModel();
this.searchResults = new Mod.SearchResults();
this.setupNavigation();
this.setupSearch();
},
search: function(keywords){
App.content.show(this.searchResultsView);
console.log(keywords);
},
home: function() {
var homeView = new Mod.HomeView();
App.content.show(homeView);
},
setupNavigation: function(){
this.navigationView = new Mod.NavigationView({
model: this.queryModel
});
App.navigation.show(this.navigationView);
},
setupSearch: function() {
var self = this;
this.queryModel.on("change:keywords", function(){
var keywords = this.get('keywords');
self.search(keywords);
// todo, update route silently
});
this.searchResultsView = new Mod.SearchResultCompositeView({
model: this.queryModel,
collection: this.searchResults
});
}
});
Mod.addInitializer(function(){
Mod.controller = new Controller();
Mod.router = new Router({
controller: Mod.controller
});
Mod.controller.start();
});
});
// Start the app
// -------------
App.start();
Raw
gistfile2.txt
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="styles/main.css">
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand logo" href="#">Limelight Labs</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Events</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Knowledge Base <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Contextual Editing</a></li>
<li><a href="#">Email Newsletters</a></li>
<li><a href="#">Interativity Tools</a></li>
<li class="divider"></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Registraton &amp; Single-Sign-On</a></li>
</ul>
</li>
</ul>
<div class="navbar-search pull-left" action="">
<section id="navigation">
</section>
</div>
</div>
<section id="navbar"></section>
</div>
</div><!-- /navbar-inner -->
</div>
<div class="container" id="content">
</div>
<!-- Templates -->
<script id="home-template" type="text/html">
<div class="hero-unit">
<h1>Home View</h1>
<p>Welcome to Limelight Labs</p>
</div>
</script>
<script id="navigation-template" type="text/html">
<input id="search-input" type="text" class="search-query span3" placeholder="Search">
</script>
<script id="search-result-item-template" type="text/html">
item...
</script>
<script id="search-result-template" type="text/html">
Search Results
<ul></ul>
</script>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!-- build:js scripts/main.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/backbone.marionette/lib/backbone.marionette.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/sass-bootstrap/js/bootstrap-affix.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-alert.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-dropdown.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-tooltip.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-modal.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-transition.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-button.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-popover.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-typeahead.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-carousel.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-scrollspy.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-collapse.js"></script>
<script src="bower_components/sass-bootstrap/js/bootstrap-tab.js"></script>
<!-- endbuild -->
</body>
</html>
Raw
gistfile3.txt
$iconSpritePath: "../images/glyphicons-halflings.png";
$iconWhiteSpritePath: "../images/glyphicons-halflings-white.png";
@import 'sass-bootstrap/lib/bootstrap';
@import 'sass-bootstrap/lib/responsive';
a.logo {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeCAIAAADCaIt+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Mjk2NkFBRjBCQTNBMTFFMkFCMkRDQTFGN0M3RDZGOTMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Mjk2NkFBRUZCQTNBMTFFMkFCMkRDQTFGN0M3RDZGOTMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0iQjdENzIzMTYzOEUwMUJGODREOEJGOUZGNUFEQjUxRjMiIHN0UmVmOmRvY3VtZW50SUQ9IkI3RDcyMzE2MzhFMDFCRjg0RDhCRjlGRjVBREI1MUYzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YdntwQAABv1JREFUeNpcVtmOHUkRzci1sqru0nbbPWMGiWFG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');
background-repeat: no-repeat;
text-indent: 25px;
}
.hero-unit {
margin: 50px auto 0 auto;
width: 300px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment