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().
- 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
- 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.