KnockoutJS by Example by Adnan Jaswal

Author:Adnan Jaswal [Jaswal, Adnan]
Language: eng
Format: azw3, epub
Publisher: Packt Publishing
Published: 2015-09-30T04:00:00+00:00

We have reached our first checkpoint. The code for this checkpoint can be found at chapter5\checkpoint1.

Viewing contact details and information about the bank

The second user story states that the application should provide the ability to the user to view contact details and information about the bank. We have already developed the about and contact details pages as part of the first story. All we have to do now is to add content to the relevant sections.

The requirements for the contact details, specified by the client, are relatively straightforward. We need to display contact details for general enquires and lost or damaged card. We will use the Bootstrap panel to display this information. Open the view and create a div element for the panel to display the contact details for general enquiry. This div element goes in the section we created for the contact page earlier that contained the place holder text. Add the panel heading and body by using the panel-heading and panel-body CSS styles. Add contact details; you can make up the phone numbers and operating hours. Surround the panel with a div element and grid CSS to make it responsive. After adding panels for both general enquiries and lost or damaged cards, our code looks similar to this:

<div id="contact" data-bind="visible: BankPortal.isActivePage('Contact')"> <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">General enquiries</div> <div class="panel-body"> <p>Call us: 111 1111 </br> 24 hours a day</p> <p>Calling from overseas? </br> Call us: +000111 111111 </br> 24 hours a day</p> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">Lost or damaged card</div> <div class="panel-body"> <p>Call us: 111 2222 </br> 24 hours a day</p> <p>Calling from overseas? </br> Call us: +000111 222222 </br> 24 hours a day</p> </div> </div> </div> </div> </div>

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.