Skip to content

Instantly share code, notes, and snippets.

@leonelgalan

leonelgalan/application.js

Created July 28, 2014 22:25
Show Gist options
  • Save leonelgalan/b2bbd462757400237d52 to your computer and use it in GitHub Desktop.
Save leonelgalan/b2bbd462757400237d52 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require_self
'use strict'
console.log('test');
//MODEL:
var Person = Backbone.Model.extend({
});
//COLLECTION:
var Directory = Backbone.Collection.extend({
model: Person,
url: 'api/students',
initialize: function() {
},
});
//VIEW: view for single person
var PersonView = Backbone.View.extend({
initialize: function () {
this.model.fetch();
this.render();
},
render: function () {
var template = _.template($('.profile-template').html());
var output = template({students: this.model.attributes});
$('.directory-container').html(output);
return this;
}
});
//VIEW: list of all students
var DirectoryView = Backbone.View.extend({
el: '.directory-container',
initialize: function (){
var that = this;
this.collection.fetch().done(function(){
console.log(that.collection);
that.render();
})
},
render: function(){
var template = _.template($('.directory-template').html(), {students: this.collection.models});
this.$el.html(template);
return this;
}
});
var AppRouter = Backbone.Router.extend({
routes: {
'home' : '', //login screen
'api/students/:id' : 'showUser', //show one user's information
'api/students' : 'showAll' //show all users
},
initialize: function () {
//this.fetchPromise = collection.fetch();
},
showUser: function (id) {
$(document).ready(function () {
new PersonView({
model: new Person({id: id})
});
});
},
showAll: function () {
console.log('showAll');
$(document).ready(function () {
new DirectoryView({
collection: new Directory()
});
});
}
});
//instantiate the Router
var router = new AppRouter();
Backbone.history.start();
Raw
index.html.erb
<!DOCTYPE html>
<html>
<head>
<title>IronBook</title>
<%= stylesheet_link_tag 'application' %>
</head>
<body>
<header>
</header>
<div class="container">
<div class="students">
<img class="student-image" src="http://media-cache-ak0.pinimg.com/originals/ef/cd/f8/efcdf86dd42bb18117dd1c114d2eb46c.jpg">
<div class="student-details">
<p><span class="cohort">Cohort / Summer 2014</span></p>
<p><span class="name">Christine Donovan</span></p>
<p><span class="class">Front End</span></p>
<ul class="media-links">
<a href=""><%= image_tag 'github-hover.png' %></a>
<a href=""><%= image_tag 'linkedin-hover.png' %></a>
<a href=""><%= image_tag 'twitter-hover.png' %></a>
</ul>
</div>
</div>
<div class="students">
<img class="student-image" src="http://media-cache-ak0.pinimg.com/originals/ef/cd/f8/efcdf86dd42bb18117dd1c114d2eb46c.jpg">
<div class="student-details">
<p><span class="cohort">Cohort / Summer 2014</span></p>
<p><span class="name">Christine Donovan</span></p>
<p><span class="class">Front End</span></p>
<ul class="media-links">
<a href=""><%= image_tag 'github-hover.png' %></a>
<a href=""><%= image_tag 'linkedin-hover.png' %></a>
<a href=""><%= image_tag 'twitter-hover.png' %></a>
</ul>
</div>
</div>
<div class="students">
<img class="student-image" src="http://media-cache-ak0.pinimg.com/originals/ef/cd/f8/efcdf86dd42bb18117dd1c114d2eb46c.jpg">
<div class="student-details">
<p><span class="cohort">Cohort / Summer 2014</span></p>
<p><span class="name">Christine Donovan</span></p>
<p><span class="class">Front End</span></p>
<ul class="media-links">
<a href=""><%= image_tag 'github-hover.png' %></a>
<a href=""><%= image_tag 'linkedin-hover.png' %></a>
<a href=""><%= image_tag 'twitter-hover.png' %></a>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="profile">
<img class="profile-image" src="http://media-cache-ak0.pinimg.com/originals/ef/cd/f8/efcdf86dd42bb18117dd1c114d2eb46c.jpg">
<section>
<h1>Christine</h1>
<hr></hr>
<h2>Donovan</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul class="social-links">
<a href=""><%= image_tag 'twitter-hover.png' %></a>
<a href=""><%= image_tag 'linkedin-hover.png' %></a>
<a href=""><%= image_tag 'github-hover.png' %></a>
</ul>
</section>
</div>
</div>
<footer></footer>
<div class="user-container"></div>
<div class="directory-container"></div>
<script type="text/template" class="profile-template">
<dl class="user-details">
<dt>Name:</dt> <dd><%%= students.firstname %></dd>
</dl>
</script>
<script type="text/template" class="directory-template">
<%% _.each(students, function(student) { %>
<img src="" class="user-image">
<ul class="user-details">
<li>hi<%%= student.get('bio') %></li>
</ul>
<%% }); %>
</script>
<%= javascript_include_tag 'application' %>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment