yamsellem/index.html

## index.html
<!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>

## meetup.js
$(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();
});
	<!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>
	$(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();
	});