Getting Started with Knockout.js

A quick intro to Knockout.js

Transcript

1. Getting Started with Knockout.js Greg Jarzab Truck Load Team (LabRatz) March 2014
2. Building and maintaining high quality, responsive web apps is challenging • Complex interactions • Testability • Browser incompatibilities • Keeping it maintainable
3. Agenda • What is knockout.js? • MVVM Pattern • How can it make our work easier? • Declarative Bindings • Observables • Common issues • Sample app • Additional Resources
4. Knockout.js Open Source (MIT License) No External Dependencies Good Documentation / Examples Good Browser Support 6+ 2+
5. MVVM - (Model, View, View Model) Model View View Model Data Binding Business Domain UI and Web Host communicate using this form Representation of data and operations No knowledge of HTML Interactive UI Represents state of View Model Notifies View Model if anything interesting happens
6. MVVM & Knockout can make things easier • Declarative bindings • Automatic UI refresh • Dependency tracking • Testability
7. Disclaimer There are no silver bullets in software engineering
8. Binding view model with page elements http://jsfiddle.net/uqR4T/2/ Connect the view model with HTML Setup Binding Define view model #1 #2 #3
9. Several types of bindings available • Text /Appearance • Control flow • Form fields • Templating See knockout.js website for more details
10. Observables Allow bidirectional communication between data and its dependencies Observable HTML Element New Value I have a new value!!! New Value New Value
11. Observables Want dependants to be notified of changes Will automatically update, whenever dependencies change http://jsfiddle.net/w5u4t/2/ #1 #2
12. Observable Arrays Notifies dependants about changes of length Retrieve value of observable http://jsfiddle.net/pkBR2/ Add to the end of observable array Increment current number Refers to current loop item #1 #2 #3 #4 #5
13. Some of the most common roadblocks
14. Retrieving observable values http://jsfiddle.net/xHm7h/ Observables and Observable Arrays are implemented as functions Read value with: observableName() Observable function, not the actual value
15. Setting observable values http://jsfiddle.net/FHQmt/ Observables and Observable Arrays are implemented as functions Update value with: observableName(“newValue”) No longer an observable
16. Incorrect binding expression http://jsfiddle.net/Evh8Y/ Since driver is an observable, this is looking for a property on a function Get the value of driver first, and then bind with the observable property called name
17. Incorrect usage of ko.applyBindings If you are calling ko.applyBindings() more than once, you are probably doing something wrong If you need to update the view with the results of an AJAX call, update the view model. Rule of thumb:
18. Sample App Requirements: 1. Ability to add stops to a list 2. Blank stops not allowed 3. Ability to remove stops from list 4. Up to three stops allowed in list
19. Defining the View Model This will hold the stop that is currently being added Will hold our list of stops After adding a stop, we clear the stopInput observable Need the number of stops currently in the list. #2 #1 #4 #3
20. Setting up Bindings Create an instance of our view model and connect it to the HTML Bind input field, and button #2 #1 Iterate over all items in stops #3 On click, call remove stop #4
21. Lets see it Go (With Bootstrap Styles)
22. Additional Resources http://knockoutjs.com http://www.knockmeout.net http://stackoverflow.com
23. Thank You