Skip to content

Instantly share code, notes, and snippets.



Created Nov 27, 2013
What would you like to do?
Simple filtering example using Stapes.js and Rivets.js

Dependencies managed with Bower:

npm install -g bower
bower install

...Then open up index.html in a browser.

// Rivets adapter for Stapes
rivets.adapters[':'] = {
subscribe: function(obj, keypath, callback) {
obj.on("change:" + keypath, callback)
unsubscribe: function(obj, keypath, callback) {"change:" + keypath, callback)
read: function(obj, keypath) {
return obj.get(keypath)
publish: function(obj, keypath, value) {
obj.set(keypath, value)
// sample data
var lawyers = [
{"name":"Tarik Y. Guthrie", "areas":['area one', 'area two']},
{"name":"Allen C. Lamb", "areas":['area three']},
{"name":"Venus I. Wheeler", "areas":['area two']},
{"name":"Brenda A. Coffey", "areas": ['area one']},
{"name":"Rana A. Salas", "areas":['area three']}]
// Lawyers module
var Lawyers = Stapes.subclass({
constructor: function (list) {
// initialize list of lawyers
this.list = list || []
console.log('new Lawyers object', this, this.all)
// return the full list of lawyers
all: function() {
return this.list
// return a filtered list of lawyers based on passed in attributes
filter: function (name, area) {
console.log('Lawyers.filter', name, area)
return _.filter(this.all(), function (item) {
return ( > -1) && (_.contains(_.toArray(item.areas), area) || !area)
// Lawyers controller
var Controller = Stapes.subclass({
constructor: function (model) {
// make 'this' work sanely
// store reference to Lawyers Module
this.Lawyers = model
// set up properties used for user search and filter
this.set('search', '')
this.set('area', '')
this.set('lawyers', this.Lawyers.all())
// the : adapter only works on change...this triggers the change event on keyup.
update: function (event, binding) { Event('change'));
// update our local list of lawyers based on user filters
filter: function () {
this.set('lawyers', this.Lawyers.filter(this.get('search'), this.get('area')))
this.set('found', this.get('lawyers').length)
// should probably be in DOM-ready
// instantiate the controller and Lawyers module, passing in our array of lawyers
// lawyers could easily be loaded via AJAX
var app = new Controller(new Lawyers(lawyers))
// bind dom to controller
var view = rivets.bind(document.getElementById('app'), { app: app })
"name": "rivetsjs + stapesjs filter example",
"version": "0.0.0",
"authors": [
"Eli Dupuis <>"
"main": "index.html",
"license": "MIT",
"private": true,
"ignore": [
"dependencies": {
"rivets": "~0.6.5",
"lodash": "~2.4.0",
"stapes": "~0.8.0"
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Simple Stapes & Rivets Test</title>
<section id="app">
<input rv-value="app:search" rv-on-keyup="app.update" type="text" placeholder="search by name">
<span rv-text="app:search"></span>
<select rv-value="app:area" rv-on-change="app.filter">
<option value="">All Areas</option>
<option value="area one">Area One</option>
<option value="area two">Area Two</option>
<option value="area three">Area Three</option>
<span rv-text="app:area"></span>
<p>Found { app:found } lawyers.</p>
<ul id="list">
<li rv-each-person="app:lawyers">
{ }, { person.areas }
<div rv-hide='app:found | lt 1'>
<p>No lawyers found ({ app:search } : { app:area }).</p>
<script src="bower_components/lodash/dist/lodash.min.js"></script>
<script src="bower_components/stapes/stapes.min.js"></script>
<script src="bower_components/rivets/dist/rivets.min.js"></script>
<script src="app.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.