Address Control (JS)

by VipulS

HTML

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="ibox">
        <div class="ibox-title">
          <h4>
    Address Control
    </h4>
        </div>
        <div class="ibox-content">
          <address-control params="addressViewModel: addressViewModel">
          </address-control>
        </div>
        <div class="ibox-footer">
          <button class="btn btn-primary" data-bind="click: getAddress">
            Get Address
          </button>
        </div>
      </div>
    </div>
  </div>
</div>






<template id="tpladdress">
  <div data-bind="with: addressViewModel">
    <div>
      <label class="control-label control-label-secondary">Street</label>
      <input type="text" class="form-control" data-bind="value:addressLine1">
    </div>
    <div>
      <div class="row">
        <div class="col-sm-4 col-xs-12">
          <label class="control-label control-label-secondary">City</label>
          <input type="text" class="form-control" data-bind="value:city">
        </div>
        <div class="col-sm-4 col-xs-6">
          <label class="control-label control-label-secondary">State</label>
          <input type="text" class="form-control" data-bind="value:state">
       ...

JavaScript

var AddressViewModel = function() {

    this.addressLine1 = ko.observable('')
    this.addressLine2 = ko.observable('')

    this.city = ko.observable('')
    this.state = ko.observable('')
    this.postalCode = ko.observable('')
    this.country = ko.observable('')


    this.setValue = function(o) {
      this.addressLine1(o.AddressLine1);
      this.addressLine2(o.AddressLine2);
      this.city(o.City);
      this.state(o.State);
      this.postalCode(o.PostalCode);
      this.country(o.Country);
      //this.clearError();
    }

    this.getValue = function() {
      return {
        AddressLine1: this.addressLine1(),
        AddressLine2: this.addressLine2(),
        City: this.city(),
        State: this.state(),
        PostalCode: this.postalCode(),
        Country: this.country()
      }
    }

    this.clearValue = function() {
      this.addressLine1('');
      this.addressLine2('');
      this.city('');
      this.state('0');
      this.postalCode('');
      this.country('');
    }
  }



  var AddressComponentViewModel = function(parms) {
    this.addressViewModel = ko.observable(parms.addressViewModel);
  }



  ko.components.register('address-control', {
    viewModel: AddressComponentViewModel,
    template: {
      element: 'tpladdress'
    }
  });



  var YourMainViewModel = function() {
    this.addressViewModel = new AddressViewModel({
      AddressLine1: 'Kiprosh',
      City: 'City',
      PostalCode: '123456',
      State: 'MH'
    });
    this.getAddress = function() {
      //if(this.addressViewModel.isValid())
      alert(JSON.stringify(this.getValue()));
    }
    this.setValue = function(value) {
      this.addressViewModel.setValue({
        AddressLine1: 'Kiprosh',
        City: 'City',
        PostalCode: '123456',
        State: 'MH'
      });
      //this.addressViewModel.clearError();
    }

    this.getValue = function() {
      return {
        AddressViewModel: this.addressViewModel.getValue()
      };
    }
  }


  var vm =...