Knockout Validation Extender

Testing a prototype validation mechanism using Knockout JS and extenders.

by David Kyle

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/mint-choc/jquery-ui.css">
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div id="container">
  <span data-bind="text: Id"></span>
  <br />
  <b>Name: </b><span data-bind="text: Name"></span>
  <h4>
    Hobbies:
  </h4>
  <br />
  <ul data-bind="foreach: Hobbies">
    <li><span data-bind="text: HobbyName"></span></li>
  </ul>
</div>

<input type="text" name="newHobby" id="newHobby">
<button id="addHobbyButton">
  Add Hobby</button>

CSS

ul {
  margin-left: 20px;
}

JavaScript

'use strict';

let HobbyViewModel = function(defaults) {
  let hvm = {
    HobbyName: ko.observable('')
  };

  function construct(args) {
    if (args) {
      if (args.Value) {
        hvm.HobbyName(args.Value);
      }
    }
  }

  construct(defaults);

  return hvm;
};

let PageViewModel = function(defaults) {
  let pvm = {
    Id: ko.observable(-1),
    Name: ko.observable(''),
    Hobbies: ko.observableArray([])
  };

  function construct(args) {
    if (args) {
      if (args.Id) {
        pvm.Id(args.Id);
      }

      if (args.Name) {
        pvm.Name(args.Name);
      }
    }
  }

  pvm.AddHobby = function(hobby) {
    pvm.Hobbies.push(new HobbyViewModel({
      Value: hobby
    }));
  };

  construct(defaults);

  return pvm;
};

let vm = new PageViewModel({
  Id: 1,
  Name: 'Dylan'
});

vm.AddHobby('Skating');

$(function() {
  ko.applyBindings(vm, $('#container')[0]);

  $(document).on('click', '#addHobbyButton', function(e) {
    vm.AddHobby($('#newHobby').val());
  });
});