Communicating between your backbone views using Geppetto

A demo application that illustrates how you can communicate with your views using Geppetto.

by niki4810

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.modelbinder/0.1.3/Backbone.ModelBinder-min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://raw.github.com/josscrowcroft/accounting.js/master/accounting.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="https://raw.github.com/ModelN/backbone.geppetto/master/backbone.geppetto.js"></script>
<!--Editor View Template-->
<script type="text/template" id="editor-template">
    <div class = "well span4"> 
        <fieldset>
            <legend>Add Contact</legend>    
        <form> 
        <label for="firstName"> First Name :</label>
        <input type = "text" name = "firstName" placeHolder = "First Name" />
        <label for="lastName"> Last Name :</label>
        <input type = "text" name = "lastName" placeHolder = "Last Name" /> 
        <label for="salary"> Salary :</label>
        <input type = "text" name = "salary" placeHolder = "Salary" /> 
        <label for="pro"> Professional :</label>
        <input type = "checkbox" name = "pro" >
        <label for="favSearch"> Fav Search Engine :</label>    
            <input type="text" name="favSearch" placeholder="for eg: http://www.google.com"/>
         </form> 
            <button class="btn btn-primary addContact">Add Contact</button>
         </fieldset>   
        </div>
</script>

<!--Saved Contacts Template-->
    <script type="text/template" id="table-template">
        <fieldset>
            <legend>Saved Contacts</legend>
            <table class="table table-bordered table-striped table-condensed">
   
    </table>
    </fieldset>
    </script>    
<script...

CSS

body {
    padding : 20px;
}
div {
    margin-right : 10px;
}
.well{
padding-top : 0px;
}

.ui-effects-transfer {
    border: 1px dotted black;
  }

JavaScript

$(function() {
	//utility functions
	var salaryConverter = function(direction, value) {
		if (direction === "ModelToView") {
			//format only when the direction is from model to view
			return accounting.formatMoney(value);
		} else {
			//from view to model, just store the plain value
			return value;
		}
	};

	//commands

	//models
	var BaseViewModel = new Backbone.Model();
	BaseViewModel.set({
		"firstName" : "",
		"lastName" : "",
		"salary" : "",
		"pro" : true
	});

	//controller (Geppetto Context)

	var ApplicationContext = Geppetto.Context.extend({
		initialize : function() {
			//create a local model instance and assign the base view model to it
			// this model can now be share across all the view that share the
			// application context
			this.model = BaseViewModel;
			// map commands here...
		}
	});

	//Views
	var ContainerView = Backbone.View.extend({
		initialize : function() {
			_.bindAll(this);
			Geppetto.bindContext({
				view : this,
				context : ApplicationContext
			});
		},
		render : function() {
			var templateId = "#" + this.options.templateId;
			var template = _.template($(templateId).html());
			var templateHTML = template();
			this.$el.html(templateHTML);
			return this;
		},
		postConstruct : function() {
			this.constructEditorView();
			this.constructTableView();
		},
		constructEditorView : function() {
			//setup bindings for editor view
			var editorViewBindings = {
				"firstName" : '[name = "firstName"]',
				"lastName" : '[name = "lastName"]',
				"salary" : {
					selector : '[name = "salary"]',
					converter : salaryConverter
				},
				"pro" : '[name = "pro"]',
				"favSearch" : '[name = "favSearch"]'
			};

			//instantiate an editor view
			var myEditorView = new EditorView({
				context : this.context,
				model : this.context.model,
				templateId : "editor-template",
				bindings : editorViewBindings
			});
			this.$(".container").append(myEditorView.render().$el);
		},
		constructTableView : function() {
			var...