Created
June 28, 2014 07:19
-
-
Save yamsellem/a31ac51b8648e6192cbe to your computer and use it in GitHub Desktop.
Backbone meetup S01E2 — Stickit
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html class="no-js" lang="en"> | |
| <head> | |
| <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> | |
| </head> | |
| <body> | |
| <nav class="top-bar" data-topbar=""> | |
| <ul class="title-area"> | |
| <!-- Title Area --> | |
| <li class="name"> | |
| </li> | |
| <!-- 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> | |
| </ul> | |
| <section class="top-bar-section"> | |
| <ul class="left"> | |
| <img src="css/img/favicon.png"> | |
| <h1>Trip planner from the 90's</h1> | |
| </ul> | |
| </section> | |
| </nav> | |
| <section> | |
| <div class="row"> | |
| <div class="large-8 medium-8 columns"> | |
| <form> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <label>Where do we go?</label> | |
| <input type="text" placeholder="city" name="city"/> | |
| </div> | |
| </div> | |
| <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> | |
| <div class="small-3 columns" style="float:left;"> | |
| <span class="postfix">friends</span> | |
| </div> | |
| </div> | |
| </div> | |
| <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 | |
| trip</label> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <label>How do we get there?</label> | |
| <select></select> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="large-4 medium-4 columns"> | |
| <label class="preview">Live model preview</label> | |
| <div class="panel"> | |
| <h5></h5> | |
| <p class="friends"></p> | |
| <p class="type"></p> | |
| <p class="mode"></p> | |
| <a href="#" class="small button">Book this trip</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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 () { | |
| this.stickit(); | |
| }, | |
| 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 () { | |
| this.stickit(); | |
| }, | |
| 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") | |
| $el.closest('.columns').hide(); | |
| else | |
| $el.closest('.columns').show(); | |
| } | |
| }); | |
| 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