databinding-using-stickit.js

$(function () {

create a instance of Backbone Model with some default values.

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

create a Backbone view

	var BaseView = Backbone.View.extend({
		close: function () {

when view closes, call unstickit to unbind Model bindings

			this.unstickit();
		},
		render: function () {

when the view is rendered get the templated id from passed in options NOTE: templateId is not a property of Backbone or Backbone Stickit, its a custom parameter that we pass into view's constructor

			var templateId = "#" + this.options.templateId;

construct the template

			var template = _.template($(templateId).html());
			var templateHTML = template();

append it to current view

			this.$el.html(templateHTML);

call stickit to apply view model bindings

			this.stickit(this.model,this.options.bindings);
			return this;
		},

create a converter function, that formats the given value as money, for example 123 gets converted to $123.00, used by the money input.

		salaryConverter : function(value,options){
			return  accounting.formatMoney(value);
		}
	});

bindings for editor view: firstName attribute on the model to element with name property set to firstName. lastName attribute on the model to element with name property set to lastName. salary attribute on the model to element with name property set to salary, also set the onGet function so that the value is formatted as money. favSearch attribute on the model to element with name property set to favSearch.

	var editorViewBindings = {
		'[name = "firstName"]' : "firstName", 
		'[name = "lastName"]' : "lastName",
		'[name = "salary"]':{
			observe: 'salary',
			onGet: 'salaryConverter'
			} ,
		'[name = "pro"]' : "pro",
		'[name = "favSearch"]': "favSearch"
		};

instantiate the editor view by passing the model, tempalte id and bindings into the constructor

		var myEditorView = new BaseView({
			model: BaseViewModel,
			templateId: "editor-template",
			bindings: editorViewBindings
		});

bindings for viewer view: firstName attribute on the model to element with name property set to firstName. lastName attribute on the model to element with name property set to lastName. salary attribute on the model to element with name property set to salary, also set the onGet function so that the value is formatted as money. favSearch attribute on the model to element with name property set to favSearch, Notice that there are two bindings here (set as an array), the reason for this is, on the preview view, we are binding favSearch to an anchor, so we want to update the anchor label as well as the 'href' property on the anchor. to achieve this we make use of 'update' call back function in the bindings, which give the hook to the anchor $el. using this reference in our callback function we set the // text and href properties on the anchor.

		var viewerBindings = {
			'[name = "firstName"]' : "firstName", 
			'[name = "lastName"]' : "lastName",
			'[name = "salary"]':{
				observe: 'salary',
				onGet: 'salaryConverter'    
				} ,
			'[name = "pro"]' : "pro",
			'[name = "favSearch"]' : {
				observe : 'favSearch',
				update: function($el, val, model, options) {
					$el.text(val);
					$el.attr("href",val);
					}
				}
			}

instantiate the viewer view by passing the model, tempalte id and bindings into the constructor

			var myViewerView = new BaseView({
				model: BaseViewModel,
				templateId: "viewer-template",
				bindings: viewerBindings
			});

append both the Backbone views to the container

			$(".container").append(myEditorView.render().$el);
			$(".container").append(myViewerView.render().$el);

		});