Skip to content

Instantly share code, notes, and snippets.

@Jauny
Last active January 3, 2016 22:09
Show Gist options
  • Save Jauny/8526747 to your computer and use it in GitHub Desktop.
Save Jauny/8526747 to your computer and use it in GitHub Desktop.
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
$(function () {
var App = {
Models: {},
Views: {},
Collections: {}
};
// Global app element
App.Views.App = Backbone.View.extend({
el: $('#app'),
initialize: function() {
this.trucks = new App.Collections.Trucks();
this.trucksView = new App.Views.TrucksView({
collection: this.trucks
});
this.SearchView = new App.Views.SearchView({
collection: this.trucks
});
this.mapView = new App.Views.MapView({
collection: this.trucks
});
this.trucks.fetch({
reset: true
});
}
});
// initialize everything
window.app = new App.Views.App();
});
//= require models/truck.js
//= require collections/trucks
$(function () {
window.App = {
Models: {},
Views: {},
Collections: {}
};
// Global app element
App = Backbone.View.extend({
el: $('#app'),
initialize: function() {
this.trucks = new Trucks();
this.trucksView = new App.Views.TrucksView({
collection: this.trucks
});
this.SearchView = new App.Views.SearchView({
collection: this.trucks
});
this.mapView = new App.Views.MapView({
collection: this.trucks
});
this.trucks.fetch({
reset: true
});
}
});
// initialize everything
window.app = new App();
});
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>SF Food Trucks!</title>
<link href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css' rel='stylesheet'>
<link href='css/style.css' rel='stylesheet'>
</head>
<body>
<div id='main'>
<div id='app'>
<div class='sidebar col-xs-4'>
<div class='list-group' id='trucks-list'>
<div id='search'>
<input class='form-control' id='truck-search' placeholder='Search a Food Truck!' type='search'>
</div>
<div id='trucks'></div>
</div>
<div class='col-xs-8' id='map'>
<div id='map-canvas'></div>
</div>
</div>
</div>
<script id='truck-item-template' type='text/template'>
<h4>
<img src="<%= this.model.icon() %>" class="pull-right" />
<%= this.model.attributes.applicant %>
</h4>
</script>
</div>
<script src='js/vendors/jquery.js' type='text/javascript'></script>
<script src='js/vendors/underscore.js' type='text/javascript'></script>
<script src='js/vendors/backbone.js' type='text/javascript'></script>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBLOJwjMTFe6BcrByw34gwxVEcJeIzTYD0&amp;sensor=true' type='text/javascript'></script>
<script src='js/app.js' type='text/javascript'></script>
</body>
// Truck Model
App.Models.Truck = Backbone.Model.extend({
rootURL: '/trucks',
food: function() {
return this.attributes.fooditems.split(":");
},
icon: function() {
return this.attributes.facilitytype == 'Truck' ? 'images/truck2.png' : 'images/pushcart.png';
}
});
// Trucks Collection
App.Collections.Trucks = Backbone.Collection.extend({
// holds truck model
model: App.Models.Truck,
url: '/trucks',
filter: function(query) {
var filteredTrucks = _.filter(this.models, function(truck) {
return (truck.attributes.applicant.toLowerCase().indexOf(query.toLowerCase()) !== -1) ||
(truck.attributes.fooditems.toLowerCase().indexOf(query.toLowerCase()) !== -1) ||
(truck.attributes.facilitytype.toLowerCase().indexOf(query.toLowerCase()) !== -1);
});
return new App.Collections.Trucks(filteredTrucks);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment