fernandozamoraj/knockout-crashcourse-demo

## knockout-crashcourse-demo
<!DOCTYPE html>
<html>
    <head>
        <title>Knockout Demo</title>

    </head>
    <body>
          <div data-bind="text: firstName">fern</div>
          <div data-bind="text: lastName">zamora</div>

          <input data-bind="value: firstName, valueUpdate: 'afterkeydown'"/>
          <input data-bind="value: lastName, valueUpdate: 'afterkeydown'"/>
          <input type="submit" data-bind="click: addStudent"/>

          <ul data-bind="foreach: list">
              <li>
                  <span data-bind="text: $data.firstName"></span>
                  <span data-bind="text: $data.lastName"></span>

              </li>
          </ul>
          <!--Knockout reference-->
        <script src="Scripts/ko.js"></script>
        <script>
            var studentModel = {
                firstName: ko.observable(""),
                lastName: ko.observable(""),
                list: ko.observableArray(),
                addStudent: function(){
                    this.list.push(
                        {
                            firstName: this.firstName(),
                            lastName: this.lastName()
                        });
                }
            }

            studentModel.firstName("Joe");
            studentModel.lastName("Smith");
            studentModel.list.push({ firstName: "Joe", lastName: "Smith"});
            studentModel.list.push({firstName: "Dan", lastName: "Jones"});
            studentModel.list.push({firstName: "Mary", lastName: "Kay"});

            //make sure this is spelled correctly
            ko.applyBindings(studentModel);
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Knockout Demo</title>

	</head>
	<body>
	<div data-bind="text: firstName">fern</div>
	<div data-bind="text: lastName">zamora</div>

	<input data-bind="value: firstName, valueUpdate: 'afterkeydown'"/>
	<input data-bind="value: lastName, valueUpdate: 'afterkeydown'"/>
	<input type="submit" data-bind="click: addStudent"/>

	<ul data-bind="foreach: list">
	<li>
	<span data-bind="text: $data.firstName"></span>
	<span data-bind="text: $data.lastName"></span>

	</li>
	</ul>
	<!--Knockout reference-->
	<script src="Scripts/ko.js"></script>
	<script>
	var studentModel = {
	firstName: ko.observable(""),
	lastName: ko.observable(""),
	list: ko.observableArray(),
	addStudent: function(){
	this.list.push(
	{
	firstName: this.firstName(),
	lastName: this.lastName()
	});
	}
	}

	studentModel.firstName("Joe");
	studentModel.lastName("Smith");
	studentModel.list.push({ firstName: "Joe", lastName: "Smith"});
	studentModel.list.push({firstName: "Dan", lastName: "Jones"});
	studentModel.list.push({firstName: "Mary", lastName: "Kay"});

	//make sure this is spelled correctly
	ko.applyBindings(studentModel);
	</script>
	</body>
	</html>