How Data binding works in Visual Studio LightSwitch HTML Client

As we know, LightSwitch is SPA framework, it is important to know about how the data binding works in LightSwitch HTML Client application. Before we discussed about the data binding in LightSwitch, first we will know some important things about Data Binding.

Data binding

Data binding is the process that establishes a connection between the application controls and the properties/variables that are bound to.

When the data changes its value, the elements/controls that are bound to the data reflect changes automatically.

For example, if the user types something in a TextBox control, the underlying data value is automatically updated to reflect that change.

Data binding in Javascript

There are few frameworks available in javascript to implement the better data binding in web application which is based on KnockoutJS BackboneJS AngularJS are some of them.

Here, I have some articles regarding KnockoutJS with ASP.Net MVC4.

Data binding in LightSwitch Framework

Data binding in LightSwitch HTML Client is managed by the msls.js core framework. The DataBinding class in msls.js framework is used to manage the Data binding.



LightSwitch framework binds all the properties and controls when the application is loaded, using the DataBinding class shown above. The DataBinding class is defiend in the data namespace with few functions like bind().

1. The DataBinding constructor accepts five parameters.
   
   a. bindingPath - The property name with path. i.e. details.student.name
   b. bindingSource - The object where the call is made i.e contentItem.dataBind, contentItem is the Binding source
   c. targetProperty - The property i.e. name
   d. bindingTarget - The parent object i.e. student
   e. bindingMode - The mode of the binding
   
   
2. The bind function which initiates the binding.

Data binding Modes

There are five binding modes available in LightSwitch HTML Client.

msls_defineEnum("data", {

        DataBindingMode: {

            twoWay: 1,

            oneWayFromSource: 2,

            oneWayFromTarget: 3,

            once: 4

        }

    });

There Data binding modes are defined as enum in the data namespace as shown above.

Ways of Data binding in LightSwitch HTML Client

There are two ways in which we can achieve the data binding in LightSwitch HTML Client. There are dataBind & addChangeListener functions.

1. dataBind

The dataBind function accepts two parameters bindingPath & callback. The bindingPath is the path for the property and the callback is to execute when the property is changed.



As highlighted, the dataBind function creates an instance for each and every data binding.

The dataBind is available in the contentItem object.

2. addChangeListener

The addChangeListener function accepts two parameters called proeprtyName & listener.



The addChangeListener functions works with propertyName but NOT on propertyPath. i.e. it will accept only the property name of the object. As like dataBind, it won't work with property path like details.screen.name.

Note that the addChangeListener functions implements addEventListener & it is available in all the places NOT only on contentItem.

We will have an example application to work on these bindings.

Example

Let us take the example application from my last article & will modify slightly to check the bindings.

dataBind function usage

To check the bindings using dataBind, we will add a data item 'FullName' into the AddEditStudent screen which will be updated when the LastName & Name property of the Student model is changed.





And drag the data item from left panel to screen as shown below.



We have to subscribe the LastName & Name property of the Student model to update the FullName with binding.



To add the binding, select the Rows Layout & click on the Edit PostRender Code link to add the data binding in javascript.

myapp.AddEditStudent.Details_postRender = function (element, contentItem) {

    // Write code here.

    contentItem.dataBind("value.Student.Name", function (newValue) {

        var names = contentItem.screen.FullName ? contentItem.screen.FullName.split(" ") : [];

        if (names.length > 1) {

            contentItem.screen.FullName = newValue + " " + names[1];

        } else {

            contentItem.screen.FullName = newValue;

        }

    });

   

    contentItem.dataBind("value.Student.LastName", function (newValue) {

        var names = contentItem.screen.FullName ? contentItem.screen.FullName.split(" ") : [];

        if (names.length > 0) {

            contentItem.screen.FullName = names[0] + " " + newValue;

        } else {

            contentItem.screen.FullName = newValue;

        }

    });

};

We have bound the Name & LastName properties. The FullName property will be updated when the values in those two properties are changed.

addChangeListener function usage

As we told, the addChangeListener can be accessible in all the places like screen & entity. We will see how the addChangeListener is used with the entity.



Open the Student Entity screen & select the HTMLClient view as shown in the above figure.

Click on the Write Code button and click on the created link to add the binding on the Student's LastName property.

myapp.Student.created = function (entity) {

    // Write code here.

    entity.addChangeListener("LastName", function(newValue) {

        console.log(newValue);

    });

 

};

As told, addChangeListener accepts the property name as a first parameter & second one is the callback function to execute on the data change.

Output:



Happy Coding.