gravesm/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rivitzz!!~</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <span class="navbar-brand">Rivitzz!</span>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-md-offset-3">
        <form class="form-inline" rv-on-submit="model.search" id='search-form'>
          <div class="form-group">
            <input type="text" class="form-control" name="repository">
          </div>
          <button type="submit" class="btn btn-default">Search</button>
        </form>
        <table id="repo-list" class="table table-condensed">
          <thead>
            <tr>
              <th>Repo</th>
              <th>Open Issues</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr rv-each-repo="model:models">
              <td rv-text="repo:name"></td>
              <td rv-text="repo:open_issues"></td>
              <td rv-on-click="model.delete">
                <button type="button" class="btn btn-default btn-xs">
                  <span class="glyphicon glyphicon-remove"></span> Remove
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
  <script src="rivitzz.js"></script>
</body>
</html>

## rivitzz.js

var BoundView = Backbone.View.extend({
  render: function() {
    this.binding = rivets.bind(this.el, { model: this.model });
  },
  remove: function() {
    this.binding.unbind();
  }
});

var SearchFormView = BoundView.extend({
  el: '#search-form'
});

var SearchResultsView = BoundView.extend({
  el: '#repo-list'
});

var Repository = Backbone.Model.extend({
  urlRoot: 'https://api.github.com/repos',
  url: function() {
    var encoded = Backbone.Model.prototype.url.apply(this);
    return decodeURIComponent(encoded);
  },
  idAttribute: "full_name"
});

var Repositories = Backbone.Collection.extend({
  model: Repository,
  search: function(ev, ctx) {
    ev.preventDefault();
    var name = $(this).find('input[name=repository]').val();
    ctx.model.add({'full_name': name}).fetch();
  },
  delete: function(ev, ctx) {
    ctx.model.remove(ctx.repo);
  }
});

var repositories = new Repositories();

rivets.adapters[':'] = {
    observe: function(obj, keypath, callback) {
      if (obj instanceof Backbone.Collection) {
          obj.on('update', callback);
      } else {
        obj.on('change:' + keypath, callback);
      }
    },
    unobserve: function(obj, keypath, callback) {
      if (obj instanceof Backbone.Collection) {
          obj.off('update', callback);
      } else {
        obj.off('change:' + keypath, callback);
      }
    },
    get: function(obj, keypath) {
        return obj instanceof Backbone.Collection ? obj["models"] :
          obj.get(keypath);
    },
    set: function(obj, keypath, value) {
      obj.set(keypath, value);
    }
};

$(function() {
  new SearchFormView({model: repositories}).render();
  new SearchResultsView({model: repositories}).render();
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Rivitzz!!~</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	</head>
	<body>
	<nav class="navbar navbar-default">
	<div class="navbar-header">
	<span class="navbar-brand">Rivitzz!</span>
	</div>
	</nav>
	<div class="container">
	<div class="row">
	<div class="col-md-4 col-md-offset-3">
	<form class="form-inline" rv-on-submit="model.search" id='search-form'>
	<div class="form-group">
	<input type="text" class="form-control" name="repository">
	</div>
	<button type="submit" class="btn btn-default">Search</button>
	</form>
	<table id="repo-list" class="table table-condensed">
	<thead>
	<tr>
	<th>Repo</th>
	<th>Open Issues</th>
	<th>Action</th>
	</tr>
	</thead>
	<tbody>
	<tr rv-each-repo="model:models">
	<td rv-text="repo:name"></td>
	<td rv-text="repo:open_issues"></td>
	<td rv-on-click="model.delete">
	<button type="button" class="btn btn-default btn-xs">
	<span class="glyphicon glyphicon-remove"></span> Remove
	</button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
	<script src="rivitzz.js"></script>
	</body>
	</html>

	var BoundView = Backbone.View.extend({
	render: function() {
	this.binding = rivets.bind(this.el, { model: this.model });
	},
	remove: function() {
	this.binding.unbind();
	}
	});

	var SearchFormView = BoundView.extend({
	el: '#search-form'
	});

	var SearchResultsView = BoundView.extend({
	el: '#repo-list'
	});

	var Repository = Backbone.Model.extend({
	urlRoot: 'https://api.github.com/repos',
	url: function() {
	var encoded = Backbone.Model.prototype.url.apply(this);
	return decodeURIComponent(encoded);
	},
	idAttribute: "full_name"
	});

	var Repositories = Backbone.Collection.extend({
	model: Repository,
	search: function(ev, ctx) {
	ev.preventDefault();
	var name = $(this).find('input[name=repository]').val();
	ctx.model.add({'full_name': name}).fetch();
	},
	delete: function(ev, ctx) {
	ctx.model.remove(ctx.repo);
	}
	});

	var repositories = new Repositories();

	rivets.adapters[':'] = {
	observe: function(obj, keypath, callback) {
	if (obj instanceof Backbone.Collection) {
	obj.on('update', callback);
	} else {
	obj.on('change:' + keypath, callback);
	}
	},
	unobserve: function(obj, keypath, callback) {
	if (obj instanceof Backbone.Collection) {
	obj.off('update', callback);
	} else {
	obj.off('change:' + keypath, callback);
	}
	},
	get: function(obj, keypath) {
	return obj instanceof Backbone.Collection ? obj["models"] :
	obj.get(keypath);
	},
	set: function(obj, keypath, value) {
	obj.set(keypath, value);
	}
	};

	$(function() {
	new SearchFormView({model: repositories}).render();
	new SearchResultsView({model: repositories}).render();
	});