Databinding w/RivetsJSs

by Zireael

HTML

<script src="https://rawgithub.com/mikeric/rivets/v0.7.1/dist/rivets.bundled.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="divBrands">
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="name" class="control-label col-sm-2">Name:</label>
      <div class="col-sm-10">
        <input id="name" type="text" rv-value="model.name" class="form-control" />
      </div>
    </div>
    <div class="form-group">
      <label for="hiredate" class="control-label col-sm-2">Hire Date:</label>
      <div class="col-sm-10">
        <input id="hiredate" type="text" rv-value="model.hireDate" class="form-control" />
      </div>
    </div>
    <div class="form-group">
      <label for="phone" class="control-label col-sm-2">Phone:</label>
      <div class="col-sm-10">
        <input id="phone" type="text" rv-value="model.phone" class="form-control" />
      </div>
    </div>
    <div class="form-group">
      <label for="selectedBrand" class="control-label col-sm-2">Brand Filter:</label>
      <div class="col-sm-10">
        <select id="selectedBrand" rv-value="model.brandFilter" class="form-control">
          <option value="">All</option>
          <option value="Lumber">Lumber</option>
          <option value="Paint">Paint</option>
          <option value="Plumbing">Plumbing</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" rv-show="model.admin" class="btn btn-default">Submit</button>
      </div>
    </div>
    <div class="well">{model.name} was hired on {model.hireDate}</div>
  </form>
  <table class="table table-condensed table-bordered">
    <thead>
      <tr>
        <th class="col-sm-1">
          <input id="selectAllBrands" type="checkbox" />
        </th>
       ...

JavaScript

var viewModel = {
  name: "Jane Doex",
  phone: "480-520-7500",
  hireDate: "5/17/2005",
  brandFilter: "",
  admin: false,
  brands: [{
    "name": "Plywood",
    "category": "Lumber"
  }, {
    "name": "Paneling",
    "category": "Lumber"
  }, {
    "name": "Framing",
    "category": "Lumber"
  }, {
    "name": "Interior",
    "category": "Paint"
  }, {
    "name": "Ball Valves",
    "category": "Plumbing"
  }, {
    "name": "PVC Pipe",
    "category": "Plumbing"
  }]
};

// add the brands filter/formatter
rivets.formatters.brandsFormatter = function(brands, filter) {
  return brands.filter(function(brand) {
    return filter.length > 0 ? brand.category === filter : true;
  });
};

$(document).ready(function() {
  // wire up the brand filter dropdown
  $("#selectedBrand")
    .change(function() {
      viewModel.brandFilter = this.value;
    });

  // data-binding
  rivets.bind(document.body, {
      model: viewModel
    }
  );
});