Dependencies managed with Bower:
npm install -g bower
bower install...Then open up index.html in a browser.
Created
November 27, 2013 22:49
-
-
Save elidupuis/7684460 to your computer and use it in GitHub Desktop.
Simple filtering example using Stapes.js and Rivets.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Rivets adapter for Stapes | |
| rivets.adapters[':'] = { | |
| subscribe: function(obj, keypath, callback) { | |
| obj.on("change:" + keypath, callback) | |
| }, | |
| unsubscribe: function(obj, keypath, callback) { | |
| obj.off("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 (item.name.toLowerCase().indexOf(name.toLowerCase()) > -1) && (_.contains(_.toArray(item.areas), area) || !area) | |
| }) | |
| } | |
| }) | |
| // Lawyers controller | |
| var Controller = Stapes.subclass({ | |
| constructor: function (model) { | |
| // make 'this' work sanely | |
| _.bindAll(this) | |
| // 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()) | |
| this.filter() | |
| }, | |
| // the : adapter only works on change...this triggers the change event on keyup. | |
| update: function (event, binding) { | |
| event.target.dispatchEvent(new Event('change')); | |
| this.filter() | |
| }, | |
| // 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 }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "rivetsjs + stapesjs filter example", | |
| "version": "0.0.0", | |
| "authors": [ | |
| "Eli Dupuis <[email protected]>" | |
| ], | |
| "main": "index.html", | |
| "license": "MIT", | |
| "private": true, | |
| "ignore": [ | |
| "**/.*", | |
| "node_modules", | |
| "bower_components", | |
| "test", | |
| "tests" | |
| ], | |
| "dependencies": { | |
| "rivets": "~0.6.5", | |
| "lodash": "~2.4.0", | |
| "stapes": "~0.8.0" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Simple Stapes & Rivets Test</title> | |
| </head> | |
| <body> | |
| <section id="app"> | |
| <p> | |
| <input rv-value="app:search" rv-on-keyup="app.update" type="text" placeholder="search by name"> | |
| <span rv-text="app:search"></span> | |
| </p> | |
| <p> | |
| <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> | |
| </select> | |
| <span rv-text="app:area"></span> | |
| </p> | |
| <p>Found { app:found } lawyers.</p> | |
| <ul id="list"> | |
| <li rv-each-person="app:lawyers"> | |
| { person.name }, { person.areas } | |
| </li> | |
| </ul> | |
| <div rv-hide='app:found | lt 1'> | |
| <p>No lawyers found ({ app:search } : { app:area }).</p> | |
| </div> | |
| </section> | |
| <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> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment