Skip to content

Instantly share code, notes, and snippets.

@irudoy

irudoy/Simple-Backbone.js-example.markdown

Created July 7, 2014 01:48
Show Gist options
  • Save irudoy/50d00951731879bab521 to your computer and use it in GitHub Desktop.
Save irudoy/50d00951731879bab521 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Ivan Rudoy.
Raw
index.jade
nav.top-bar(data-topbar='')
section.top-bar-section
ul.left
li: a(href='#!/') Start
li: a(href='#!/success') Success
li: a(href='#!/error') Error
.row
.small-8.small-centered.large-centered.columns
#block.block
script#start(type="text/template")
.start
.userplace
h3 Username:
input(type="text", id="username", placeholder="e.g., John, Nick, Jack")
//small.error Invalid entry
.buttonplace
input.button(type="button", value="Check")
script#error(type="text/template")
.error
.alert-box.alert Error. User <%- username %> not found.
a(href="#!/").button Go back &larr;
script#success(type="text/template")
.success
.alert-box.success User <%- username %> found.
a(href="#!/").button Go back &larr;
Raw
script.js
$(function () {
// var Family = ['Nick', 'Thomas', 'John'];
var UserNameModel = Backbone.Model.extend({
defaults: {
'Name': ''
}
});
var Family = Backbone.Collection.extend({
model: UserNameModel,
checkUser: function(username) {
var findResult = this.find(function (user) {return user.get('Name') == username});
return findResult != null;
}
});
var MyFamily = new Family([
{ Name: 'John' },
{ Name: 'Nick' },
{ Name: 'Jack' }
])
var AppState = Backbone.Model.extend({
defaults: {
username: "",
state: "start"
}
});
var appState = new AppState();
var Controller = Backbone.Router.extend({
routes: {
'': 'start',
'!/': 'start',
'!/success': 'success',
'!/error': 'error'
},
start: function() {
appState.set({ state: "start" });
},
success: function() {
appState.set({ state: "success" });
},
error: function() {
appState.set({ state: "error" });
}
});
var controller = new Controller();
var Block = Backbone.View.extend({
el: $('#block'),
templates: {
'start': _.template($('#start').html()),
'success': _.template($('#success').html()),
'error': _.template($('#error').html())
},
initialize: function() {
this.model.bind('change', this.render, this);
},
render: function() {
var state = this.model.get('state');
$(this.el).html(this.templates[state](this.model.toJSON()));
return this;
},
events: {
'click input:button': 'check'
},
check: function() {
var username = $(this.el).find('input:text').val();
var find = MyFamily.checkUser(username);
appState.set({
'state': find ? 'success' : 'error',
'username': username
})
}
});
appState.bind('change:state', function() {
var state = this.get('state');
if (state == 'start')
controller.navigate('!/', false);
else
controller.navigate('!/' + state, false);
});
var block = new Block({ model: appState });
appState.trigger('change');
Backbone.history.start();
$(document).on('keypress', function(e) {
if ( e.which == 13 )
$('.button').trigger('click');
});
});
Raw
style.scss
@import "compass/css3";
body {
padding: 20px;
}
.button {
outline: none;
}
.block {
text-align: center;
}
.top-bar {
margin-bottom: 50px;
opacity: .1;
@include transition-property(all);
@include transition-duration(.2s);
@include transition-timing-function(ease-in-out);
&:hover {
opacity: 1;
}
//display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment