In this blog, I will create some simple examples which highlight how data binding can be achieved in normal HTML controls such as dropdown, buttons etc using knockout javascript library.
Let's take a look at the code first.
The first div demonstrates the text and HTML bindings. We have an observable field name in the script. The input and two spans are all bound to this field. In the first span, we use the text binding while in the second we use the html binding. So, in the input box if we type an html statement like <b>abc</b>, the text binding will show the statement as it is while the html binding will show bolded abc.
The second div is for value binding. This is also bound to the name observable field. With value binding we can associate valueUpdate to specify which event will cause the change notification to take place. By default, it happens at the 'change' event. That is, when we tab out.
The third div is for checkbox binding. We have one observable field cbVal which is then bound to the checkbox input type.
The fourth div is for radio button binding. For this we have defined a static set of countries and an observable which will store the selected country in selectedCountryRadio. The input is then set to radio. For data binding we specify the value as the key property of country and the checked value will be stored in the selectedCountryRadio. In the top div, we are also using the foreach binding to iterate through each country from countries. Since inside of this div we are working with the Countries collection, we don't have access to the selectedCountryRadio. Hence we use the $parent to reach out to this property which is one level above. The span besides the input is also using the name property to dynamically load the name of the country.
Next up is drop down binding. Here we are showing 2 dropdowns. The first one allows for single selection. In the select, options specify the source of data, value specifies the selected value which is stored in the observable selectedCountryDd. Text to display is specified via optionsText and value is associated via optionsValue. optionsCaption just provides simple text to display in the drop down list.
The second drop down allows for multiple selections. This is enabled by using the multiple attribute of select. Since we are selecting multiple countries, we can not use selectedCountryDd as it only stores a single value. We need an observable array to store multiple values. So we use selectedCountries. This is bound in the select via selectedOptions. The span above this select just uses text binding to display the selectedCountries.
Next div is for enable and disable bindings. As the name suggests, enable and disable data bindings allows us to enable and disable controls based on some condition controlled via observable.
Next is event binding feature. Here we have a boolean observable in detailsAreVisible which is tied to the visible binding of details div. Then in the first div, we have defined event binding for mouseover and mouseout. These events just toggle the boolean value of detailsAreVisible. Hence when you mouseover this div area, the bool is true and since visible is tied to this bool value, the details div becomes visible.
The CSS and style bindings work similarly. In case of inline styling, we specify the property to modify and the condition based on which this style would be applied. In case of css, we just give the definition of the css style and the condition.
Next div is for focus bindings. This allows us to control via observables the focus of an html element.
The last div shows how we can bind attribute values. It shows 2 examples, one for a link and the other for an image.
Let's take a look at the code first.
The first div demonstrates the text and HTML bindings. We have an observable field name in the script. The input and two spans are all bound to this field. In the first span, we use the text binding while in the second we use the html binding. So, in the input box if we type an html statement like <b>abc</b>, the text binding will show the statement as it is while the html binding will show bolded abc.
The second div is for value binding. This is also bound to the name observable field. With value binding we can associate valueUpdate to specify which event will cause the change notification to take place. By default, it happens at the 'change' event. That is, when we tab out.
The third div is for checkbox binding. We have one observable field cbVal which is then bound to the checkbox input type.
The fourth div is for radio button binding. For this we have defined a static set of countries and an observable which will store the selected country in selectedCountryRadio. The input is then set to radio. For data binding we specify the value as the key property of country and the checked value will be stored in the selectedCountryRadio. In the top div, we are also using the foreach binding to iterate through each country from countries. Since inside of this div we are working with the Countries collection, we don't have access to the selectedCountryRadio. Hence we use the $parent to reach out to this property which is one level above. The span besides the input is also using the name property to dynamically load the name of the country.
Next up is drop down binding. Here we are showing 2 dropdowns. The first one allows for single selection. In the select, options specify the source of data, value specifies the selected value which is stored in the observable selectedCountryDd. Text to display is specified via optionsText and value is associated via optionsValue. optionsCaption just provides simple text to display in the drop down list.
The second drop down allows for multiple selections. This is enabled by using the multiple attribute of select. Since we are selecting multiple countries, we can not use selectedCountryDd as it only stores a single value. We need an observable array to store multiple values. So we use selectedCountries. This is bound in the select via selectedOptions. The span above this select just uses text binding to display the selectedCountries.
Next div is for enable and disable bindings. As the name suggests, enable and disable data bindings allows us to enable and disable controls based on some condition controlled via observable.
Next is event binding feature. Here we have a boolean observable in detailsAreVisible which is tied to the visible binding of details div. Then in the first div, we have defined event binding for mouseover and mouseout. These events just toggle the boolean value of detailsAreVisible. Hence when you mouseover this div area, the bool is true and since visible is tied to this bool value, the details div becomes visible.
The CSS and style bindings work similarly. In case of inline styling, we specify the property to modify and the condition based on which this style would be applied. In case of css, we just give the definition of the css style and the condition.
Next div is for focus bindings. This allows us to control via observables the focus of an html element.
The last div shows how we can bind attribute values. It shows 2 examples, one for a link and the other for an image.