Beginning with Knockout.js

Beginning with Knockout.js

by VipulS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://heliosapp-test.azurewebsites.net/Content/style.css">
<script src="https://heliosapp-test.azurewebsites.net/Scripts/apps/inspinia.js"></script>
<script src="https://heliosapp-test.azurewebsites.net/Scripts/plugins/metisMenu/jquery.metisMenu.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="ibox">
        <div class="ibox-title">
          <h4>Beginning with Knockout.js</h4>
        </div>
        <div class="ibox-content">
          <div class="row">
            <div class="col-sm-4 col-xs-12">
              <label class="control-label control-label-secondary">
              First Name
              </label>
              <input type="text" class="form-control" 
              data-bind="textInput:firstName">
            </div>
            <div class="col-sm-4 col-xs-12">
              <label class="control-label control-label-secondary">
              Last Name
              </label>
              <input type="text" class="form-control" 
              data-bind="textInput:lastName">
            </div>
          </div>
        </div>
        <div class="ibox-footer">
          <h3>Welcome,
            <span data-bind="text:fullName"></span>
          </h3>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

var myViewModel = function() {
		this.firstName=ko.observable("Vipul")
    this.lastName=ko.observable("Shetkar")

		this.fullName=ko.computed(function(){
    	return this.firstName()+" "+this.lastName();
    }, this)
  }

  var vm = new myViewModel();
  ko.applyBindings(vm);