sergiomerida / frontend-knockoutjs

Step by step guide to learning Knockout.JS

Learning KnockoutJS

This is a step by step tutorial to learn knockoutJS.

Why

To become a great Web Developer, you must be able to work with the latest technologies and frameworks. KnockoutJS is part of a new generation of frameworks that make frontend development much more easier, just like AngularJS. These frameworks let you dynamically bind data with html elements.

User Stories

Basic (use index.html)

As a developer you should be able to bind data from input fields to html tags.

Grocery List (use list.html)

As a shopper I must be able to see my grocery list. (use a selection field to display the list)

As a shopper I must be able to add, remove and sort my grocery list.

Controls

As a developer you should be able to use text-fields, checkboxes, drop-down lists, multi-select and radio buttons.

As a developer you should be able to display the values from all the fields in a separate part of the webpage with Knockout.JS.

People Collections

As a user I must be able to display a minimum of 3 peoples, each with 3 children as a

list. (use ko.observableArray) Example:
• Isabel have 3 childs:
  • Diego
  • Fernando
  • Jose
• Ines have 4 childs:
  • Juan
  • Pedro
  • Maria

As a user I must be able to add a child to any person in the people list.

i/o

Testing

Reflection

Answer the following questions in the reflection.txt file.

1. What did you learn about KnockoutJS?
2. What is MVVM? Why is it usefull?
3. What does the data-bind attribute do?
4. What does the following code do? ko.applyBindings(viewModel);

Look my page

http://sergiomerida.github.io/frontend-knockoutjs