KnockoutJS/Jquery custom bindings

Using custom bindings to initialize jQuery objects in Knockout Views

by Mario Carrion

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/html" id="person-template">
  <div class="form-horizontal">
    <form class="form-group">
      <label class="col-sm-2 control-label" data-bind="text: name"></label>
      <div class="col-sm-10">
        <select class="select2 form-control" data-bind="value: favorite, select2: true">
          <option value="got">Game of Thrones</option>
          <option value="bb">Breaking Bad</option>
          <option value="xfiles">X-Files</option>
        </select>
      </div>
  </div>
  </form>
</script>

<h2>What's your favorite show?</h2>

<div data-bind="template: { name: 'person-template', data: john }"></div>
<div data-bind="template: { name: 'person-template', data: walter }"></div>
<div data-bind="template: { name: 'person-template', data: dana }"></div>

JavaScript

function ShowsViewModel() {
  this.john = {
    name: "John Snow",
    favorite: "got"
  };
  this.walter = {
    name: "Walter White",
    favorite: "bb"
  };
  this.dana = {
    name: "Dana Scully",
    favorite: "xfiles"
  };
}
ko.bindingHandlers.select2 = {
  init: function(element) {
    $(element).select2();
  }
};
ko.applyBindings(new ShowsViewModel());