Databinding w/RivetsJSs

by mrrodd

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.firstNname" 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="Roofing">Roofing</option>
          <option value="Siding">Siding</option>
          <option value="Stone">Stone</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 = {
  firstName: "Mindi",
  lastName: "Abair",
  phone: "480-520-7500",
  hireDate: "5/17/2005",
  brandFilter: "",
  admin: false,
  brands: [{
    "hw_name": "Atlantic Shutter",
    "owner": "Siding"
  }, {
    "hw_name": "Builders Edge",
    "owner": "Siding"
  }, {
    "hw_name": "Clubhouse",
    "owner": "Siding"
  }, {
    "hw_name": "Dutch Quality",
    "owner": "Stone"
  }, {
    "hw_name": "Eldorado Fireplaces",
    "owner": "Stone"
  }, {
    "hw_name": "Eldorado Natural Stone",
    "owner": "Stone"
  }]
};

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

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

  // data-binding
  rivets.bind(
    document.querySelector("#divBrands"), {
      model: viewModel
    }
  );
});