Skip to content

Instantly share code, notes, and snippets.

@yamsellem yamsellem/index.html
Created Jun 28, 2014

What would you like to do?
Backbone meetup S01E2 — Stickit
<!doctype html>
<html class="no-js" lang="en">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="shortcut icon" href="css/img/favicon.png">
<title>This Meetup, Stickit ;-)</title>
<link rel="stylesheet" href="vendor/foundation/css/foundation.css"/>
<link rel="stylesheet" href="css/meetup.css"/>
<script src="vendor/jquery/dist/jquery.js"></script>
<script src="vendor/underscore/underscore.js"></script>
<script src="vendor/backbone/backbone.js"></script>
<script src="vendor/backbone.stickit/backbone.stickit.js"></script>
<script src="vendor/foundation/js/foundation.js"></script>
<script src="js/meetup.js"></script>
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
<section class="top-bar-section">
<ul class="left">
<img src="css/img/favicon.png">
<h1>Trip planner from the 90's</h1>
<div class="row">
<div class="large-8 medium-8 columns">
<div class="row">
<div class="large-12 columns">
<label>Where do we go?</label>
<input type="text" placeholder="city" name="city"/>
<div class="row">
<div class="large-6 medium-6 columns">
<div class="row collapse">
<label>With how many?</label>
<div class="small-9 columns">
<input type="text" placeholder="number of friends" name="friends"/>
<div class="small-3 columns" style="float:left;">
<span class="postfix">friends</span>
<div class="large-6 medium-6 columns">
<label>Do we get back?</label>
<input type="radio" name="type" value="oneWay" id="oneWay"><label for="oneWay">One way</label>
<input type="radio" name="type" value="roundTrip" id="roundTrip"><label for="roundTrip">Round
<div class="row">
<div class="large-12 columns">
<label>How do we get there?</label>
<div class="large-4 medium-4 columns">
<label class="preview">Live model preview</label>
<div class="panel">
<p class="friends"></p>
<p class="type"></p>
<p class="mode"></p>
<a href="#" class="small button">Book this trip</a>
$(function () {
var model = new Backbone.Model({
city: "Copenhagen",
friends: 2
var DisplayView = Backbone.View.extend({
el: '.panel',
bindings: {
"h5": "city",
".friends": {observe: "friends", onGet: "formatFriends"},
".type": {observe: "type", onGet: "formatType"},
".mode": {observe: "mode", onGet: "formatMode"}
render: function () {
formatFriends: function (value) {
if (value > 1)
return value + " friends";
else return value + " person";
formatType: function (value) {
var display = "";
if (value === "oneWay") display = "One Way";
else if (value === "roundTrip") display = "Round Trip";
return display;
formatMode: function (value) {
if (value)
return "by " + value;
var FormView = Backbone.View.extend({
el: 'form',
bindings: {
"input[name=city]": "city",
"input[name=friends]": "friends",
"input[name=type]": {observe: "type", update: "updateType"},
"select": {observe: "mode", selectOptions: {
collection: {
plane: "Plane",
train: "Train",
bus: "Bus",
bike: "Bike"
}, defaultOption: {label: "Choose one..."}
}, onSet: "hideType"}
render: function () {
hideType: function (value) {
if (value === "bike") {
this.oldType = this.model.get("type");
this.model.set("type", "none");
} else if (this.model.get("type") === "none")
this.model.set("type", this.oldType);
updateType: function ($el, value) {
if (value === "none")
new DisplayView({model: model}).render();
new FormView({model: model}).render();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.