In this post I continue to explore the knockout.js with ASP.NET MVC 4.
My ViewModel looks like this:
I have an airport object defined to take two values: city and code. Then there is an array of airports, which is build using ko.observableArray. Then there is flightSearch view model class with properties for selecting between return flights or one way flight booking, list of airports, origin and destination airports, departure and optional return date.
I want my view logic to hide return date ui when one way flight is selected.
Here is my markup for the same, along with a summary of values selected.
knockout.js binding usages
All input and select controls are bound using value binding.
Options, OptionsText, OptionsValue and OptionsCaption bindings
The code at line no. 19 specifies that ‘city’ property of the object should be used as text and ‘code’ property of the object should be used a value for the options.
if and ifnot binding
In line number 44 if binding was used to control the visibility of div containing the return date input controls. Similarly in line number 59, ifnot binding is used to control div’s visibility.
In line number 63 and 66, text binding is used to show the values of selected airports.