Simple Search Form using knockout.js

In this post I continue to explore the knockout.js with ASP.NET MVC 4.

I wish to create a flight search form which looks like this:screenN1

My ViewModel looks like this:

var airport = function(city,code){

       this.city = city;

       this.code = code;

   };

   var airports =  ko.observableArray([

               new airport("New Delhi", "DEL"),

               new airport("Mumbai", "BOM"),

               new airport("Chennai", "MAA"),

               new airport("Kolkata", "CCU"),

               new airport("Bangalore", "BLR")]);


   var flightSearch = {


       isOneWay: ko.observable("oneWay"),


       airports: airports,


       originatingAirport: ko.observable(),

       destinationAirport: ko.observable(),

       departureDate: ko.observable(),

       returnDate: ko.observable()

   };

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.

 1:

 2: <div class="row">

 3:     <div class="span8 ">

 4:         <div class="row">

 5:             <div class="span2 control-group">

 6:                 <input type="radio" name="isOneWay" value="return" data-bind="checked: isOneWay" />

 7:                 Return

 8:             </div>

 9:             <div class="span2 control-group">

 10:                 <input type="radio" name="isOneWay" value="oneWay" data-bind="checked: isOneWay"    />

 11:                 Oneway

 12:             </div>

 13:         </div>

 14:         <div class="row">

 15:             <div class="control-group">

 16:                 <label class="control-label">

 17:                     Leaving From :</label>

 18:                 <div class="controls">

 19:                     <select data-bind="options: airports,optionsText: 'city', optionsValue: 'code', value: originatingAirport, optionsCaption: 'Choose...'">

 20:                     </select>

 21:                 </div>

 22:             </div>

 23:         </div>

 24:         <div class="row">

 25:             <div class="control-group">

 26:                 <label class="control-label">

 27:                     Going To :</label>

 28:                 <div class="controls">

 29:                     <select data-bind="options: airports,optionsText: 'city', optionsValue: 'code',value: destinationAirport, optionsCaption: 'Choose...'">

 30:                     </select>

 31:                 </div>

 32:             </div>

 33:         </div>

 34:         <div class="row">

 35:             <div class="control-group">

 36:                 <label class="control-label">

 37:                     Departing :</label>

 38:                 <div class="controls">

 39:                     <input name="departureDate" type="text" data-bind="value : departureDate" />

 40:                 </div>

 41:             </div>

 42:         </div>

 43:         <div class="row">

 44:             <div class="control-group" data-bind="visible: isOneWay() === 'return'" style="display:none">

 45:                 <label class="control-label">

 46:                     Returning :</label>

 47:                 <div class="controls">

 48:                     <input name="returnDate" type="text" data-bind=" value: returnDate" />

 49:                 </div>

 50:             </div>

 51:         </div>

 52:     </div>

 53:     <div class="span3">

 54:         <h3>

 55:             Search Summary:</h3>

 56:         <div data-bind="if: isOneWay() === 'return'">

 57:             Return flights

 58:         </div>

 59:         <div data-bind="ifnot: isOneWay() === 'return'">

 60:             One way flight

 61:         </div>

 62:         <div>

 63:             Starting at: <span data-bind="text: originatingAirport"></span>

 64:         </div>

 65:         <div>

 66:             Going to: <span data-bind="text: destinationAirport"></span>

 67:         </div>

 68:     </div>

 69: </div>

knockout.js binding usages

Value binding

All input and select controls are bound using value binding.

Options, OptionsText, OptionsValue and OptionsCaption bindings

For Origin and Destination Airports, I have used these bindings. OptionsText and OptionsValue is used to bind the options to JavaScript objects.

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.

text binding

In line number 63 and 66, text binding is used to show the values of selected airports.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s