This blog post assumes that you have some basic idea about Coffee Script and JavaScript MVC Framework – Spine. If you do not have any idea, I would like to suggest you to go through the basics of Spine and CoffeeScript before proceeding here.

 

I am truly impressed with the simple way of 2 way data binding in Spine using Coffee Script. In this blog post, I will cover

  • Identifying elements with the help of properties
  • Binding the properties of Spine model with identified elements
  • Defining events for elements and change event for properties of the model
  • Adding calculated properties to the model. For e.g., a property Full Name is the combination of First Name and  Last Name of the person

 

First, to get the spine and data binding features, we need to add the following scripts files to our page

<script src=”Scripts/jquery-1.6.2.min.js” type=”text/javascript”/>

<script src=”Scripts/spine.js” type=”text/javascript”/>

<script src=”Scripts/spine.databind.js” type=”text/javascript”/>

 

 

You can get the spine binaries from here and coffee data bind binaries from here

We are ready with the pre-requisite to play with spine data binding. Let’s see how to play.

Now, I am taking an example of Model (Name: Person) which will have 3 properties First Name, Last Name and Phone.

For the above model, View will be as follows

<div id=”content”>

<p>First name: <input name=”firstName” id=”firstName” /></p>

<p>Last name: <input name=”lastName” /></p>

<p>Phone : <input name=”Phone” /></p>

<h2>Hello, <span id=”fullName”></span>!!!

Your Phone Number <span id=”Phone”/>

</h2>

</div>

Then, define the spine model

var PersonModel = Spine.Model.setup(“Person”, [“firstName”, “lastName”, “Phone”]);

Now, We’ll  create calculated properties of spine model. Let’s take the Full name, which is the combination of first name and last name. Following is the way to define calculated properties.

PersonModel.include({

fullName: function () {

return this.firstName + ” “ + this.lastName;

}

});

At this point, our model is ready with four properties. Let’s see how to define the controller which will handle the events, define the bindings etc. Following is the code which defines the bindings between above defined model and view, events for change in first name, last name

var PersonController = Spine.Controller.create({

events:

{

“change input[name=firstName]”: “changefirstName”,

“change input[name=lastName]”: “changelastName”

},

changefirstName: function (event) {

alert(“firstName updated”);

},

changelastName: function (event) {

alert(“Last Name Updated”);

},

 

bindings:

{

“value [name=firstName]”: “firstName”,

// This defines that the value of the control which has the

// name “firstName” bind with the model property

// “firstName”

“value [name=lastName]”: “lastName”,

“value [name=Phone]”: “Phone”,

“text [id=fullName]”: “fullName”,

“text [id=Phone]”: “Phone”

},

init: function () {

this.refreshBindings(this.model);

}

});

Let’s call Spine data bind methods to establish binding defined above.

PersonController.include(Spine.DataBind);

The above statement includes the binding code between model and view.

Create an instance of model defined above and initialize the controller.

var Person = PersonModel.create({id: 4, firstName: “Spine Binding”, lastName: “Demo”, Phone: “1234567890” });

var Controller = PersonController.init({ el: ‘div’, model: Person });

 

Above statement does the actual binding using the PersonController with the help of defined model (var Person in above case)

And, we can define the events for the change in properties as shown in above controller code. If we need to define single event for the change in any of the properties, we can use model level events. Following is the code which depicts the same.

// Called whenever the model is created.

PersonModel.bind(“create”, function (rec) {

alert(“Model Created”);

});

// Called whenever the model is updated.

PersonModel.bind(“update”, function (rec) {

alert(“Model Created”);

});

And, we are done with the code!!! Create a simple app with above code and see the fun!!

Reference: https://github.com/nathanpalmer/spine.databind

Sample App:

You can download the sample with ASP.NET web application from SpineBindingSample. I divided the script in About.aspx (in the sample) into two parts. One is for Events and the other one is for bindings.

Hope this helps!!!

Cheers…