www.it-ebooks.info KnockoutJS Starter Learn how to knock out your next app in no time with KnockoutJS Eric M. Barnard BIRMINGHAM - MUMBAI www.it-ebooks.info KnockoutJS Starter Copyright © 2012 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every eort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: November 2012 Production Reference: 1161112 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78216-114-1 www.packtpub.com www.it-ebooks.info Credits Author Eric M. Barnard Reviewer Roy Jacobs Acquisition Editor Mary Nadar Commissioning Editor Yogesh Dalvi Technical Editor Vrinda Amberkar Project Coordinator Amigya Khurana Proofreader Mario Cecere Graphics Valentina D'Silva Aditi Gajjar Production Coordinator Melwyn D'sa Cover Work Melwyn D'sa Cover Image Conidon Miranda www.it-ebooks.info About the author Eric Barnard is a Software Engineer in Champaign-Urbana, Illinois. He truly feels that a great day starts with a fresh pot of coee and a blank JavaScript le on his computer screen. Eric grew up on a farm in central Indiana, where he attended Purdue University. After graduating from Purdue, he sharpened his web development and startup skills as a Fellow in the Governor Robert Orr Fellowship in Indianapolis. At the time of this writing, Eric has recently got married and spends his free time attempting to keep his wife sane. He is the author of the Knockout Validation plugin and "KoGrid" a JavaScript DataGrid completely built on top of Knockout. You can nd his blog at http://www.ericbarnard.com. www.it-ebooks.info About the reviewer Roy Jacobs is a Software Architect in Utrecht, the Netherlands. Wrangling C# and JavaScript is just as interesting as moving an icon two pixels to the left to improve the user experience. Roy received his Bachelor's in Computer Science from the Fontys Polytechnic in Eindhoven and his Master's in Human-technology Interaction from the Technical University of Eindhoven. Apart from the technical stu he dabbled in directing and visual eects and enjoys spending time with his girlfriend and their hamster. He is the author of the Knockout Mapping plugin and his blog can be found at http://www.royjacobs.org. www.it-ebooks.info www.PacktPub.com Support les, eBooks, discount oers and more You might want to visit www.PacktPub.com for support les and downloads related to your book. Did you know that Packt oers eBook versions of every book published, with PDF and ePub les available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@ packtpub.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and oers on Packt books and eBooks. www.it-ebooks.info www.PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? Ê Fully searchable across every book published by Packt Ê Copy and paste, print and bookmark content Ê On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. www.it-ebooks.info www.it-ebooks.info Table of Contents KnockoutJS Starter 1 So, what is Knockout? 3 Knockout – A JavaScript library 3 Knockout – A Model-View-ViewModel (MVVM) library 3 Installation 6 Step 1 – What do I need? 6 Step 2 – Create a starter site 6 Step 3 – Download Knockout 8 Step 4 – Create our main application JavaScript le 8 Step 5 – Run the application 9 Summary 11 Quick start 12 Business overview 12 Step 1 – Dening a namespace 12 Step 2 – Creating our Model 12 Step 3 – Creating a View for our Model 14 Step 4 – Creating a ViewModel to manage our Models 15 Step 5 – Working with Observable Arrays 15 Step 6 – Adding and removing Models from an Observable Array 16 Step 7 – Editing properties of a Model 18 Step 8 – Setting up a Master-Details view 19 Step 9 – Applying bindings 21 Summary 22 www.it-ebooks.info [...]... 31 Binding handlers 31 Summary 34 People and places you should get to know 35 Official sites 35 Articles and tutorials 35 Community 36 Blogs 36 Twitter 36 [ ii ] www.it-ebooks.info KnockoutJS Starter Welcome to KnockoutJS Starter This book focuses on giving the reader a firm understanding of the core concepts of Knockout, such as MVVM and data binding, and works through real-life app development scenarios... files) /JS (various js files) Index.html 6 www.it-ebooks.info KnockoutJS Starter The JS folder will house all of our JavaScript files, and the CSS folder will house any CSS files that we use in our Knockout app We can create this site structure in a number of ways, but my favorite way is to just visit http://html5boilerplate.com/ and download their starter site It provides a site structure (or Boilerplate)... Knockout Starter Guide Hello World! This will be the starting point for developing our app We have left placeholders for our JavaScript and CSS files, and we have created a "Content" area for the majority of our markup to be placed 7 www.it-ebooks.info KnockoutJS Starter Step 3... HTML script tag The following HTML example illustrates how we use these at the bottom of the page to reference our JavaScript files 8 www.it-ebooks.info KnockoutJS Starter Knockout Starter Guide Hello World! . www.it-ebooks.info KnockoutJS Starter Learn how to knock out your next app in no time with KnockoutJS Eric M. Barnard BIRMINGHAM - MUMBAI www.it-ebooks.info KnockoutJS Starter Copyright. 35 Community 36 Blogs 36 Twitter 36 www.it-ebooks.info KnockoutJS Starter Welcome to KnockoutJS Starter. This book focuses on giving the reader a rm understanding