Created
August 21, 2014 21:19
-
-
Save msrafi/3331eb6307f64b6ca73f to your computer and use it in GitHub Desktop.
bindings from 140byt.es
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> | |
| <title>data-binding test</title> | |
| </head> | |
| <body> | |
| <fieldset><legend>Text Input</legend> | |
| <div><label>Label: </label><span class="text"></span></div> | |
| <div><input class="text"></div> | |
| <div><textarea class="text"></textarea></div> | |
| <div><input class="text" readonly></div> | |
| </fieldset> | |
| <fieldset><legend>Checkbox</legend> | |
| <div><label>Label: </label><span class="check"></span></div> | |
| <div> | |
| <input type="checkbox" class="check"> | |
| </div> | |
| <div> | |
| <input type="checkbox" class="check"> | |
| </div> | |
| </fieldset> | |
| <fieldset><legend>Radio</legend> | |
| <div><label>Label: </label><span class="radio"></span></div> | |
| <fieldset><legend>Group #1</legend> | |
| <div> | |
| <input type="radio" name="group1" value="1" class="radio"> | |
| <label>Value: 1</label> | |
| </div> | |
| <div> | |
| <input type="radio" name="group1" value="2" class="radio"> | |
| <label>Value: 2</label> | |
| </div> | |
| </fieldset> | |
| <fieldset><legend>Group #2</legend> | |
| <div> | |
| <input type="radio" name="group2" value="0" class="radio"> | |
| <label>Value: 0</label> | |
| </div> | |
| <div> | |
| <input type="radio" name="group2" value="1" class="radio"> | |
| <label>Value: 1</label> | |
| </div> | |
| <div> | |
| <input type="radio" name="group2" value="2" class="radio"> | |
| <label>Value: 2</label> | |
| </div> | |
| </fieldset> | |
| </fieldset> | |
| <fieldset><legend>Select</legend> | |
| <div><label>Label: </label><span class="select"></span></div> | |
| <div> | |
| <select class="select"> | |
| <option>Option #1</option> | |
| <option>Option #2</option> | |
| <option>Option #3</option> | |
| </select> | |
| </div> | |
| <div> | |
| <select class="select"> | |
| <option>Option #1</option> | |
| <option>Option #2</option> | |
| <option>Option #3</option> | |
| </select> | |
| </div> | |
| </fieldset> | |
| <fieldset><legend>HTML5 Inputs</legend> | |
| <div><label>Label: </label><span class="other"></span></div> | |
| <div> | |
| <label>Range</label> | |
| <input type="range" class="other" min="0" max="100"> | |
| </div> | |
| <div> | |
| <label>Number</label> | |
| <input type="number" class="other" min="0" max="100"> | |
| </div> | |
| <div> | |
| <label>Progress</label> | |
| <progress max="100" class="other"></progress> | |
| </div> | |
| </fieldset> | |
| <!-- Object.watch polyfill --> | |
| <script> | |
| /* | |
| * object.watch polyfill | |
| * | |
| * 2012-04-03 | |
| * | |
| * By Eli Grey, http://eligrey.com Public Domain. NO WARRANTY EXPRESSED OR | |
| * IMPLIED. USE AT YOUR OWN RISK. | |
| */ | |
| // object.watch | |
| if (!Object.prototype.watch) { | |
| Object.defineProperty(Object.prototype, "watch", { | |
| enumerable : false, | |
| configurable : true, | |
| writable : false, | |
| value : function(prop, handler) { | |
| var oldval = this[prop], newval = oldval, getter = function() { | |
| return newval; | |
| }, setter = function(val) { | |
| oldval = newval; | |
| return newval = handler.call(this, prop, oldval, val); | |
| }; | |
| if (delete this[prop]) { // can't watch constants | |
| Object.defineProperty(this, prop, { | |
| get : getter, | |
| set : setter, | |
| enumerable : true, | |
| configurable : true | |
| }); | |
| } | |
| } | |
| }); | |
| } | |
| // object.unwatch | |
| if (!Object.prototype.unwatch) { | |
| Object.defineProperty(Object.prototype, "unwatch", { | |
| enumerable : false, | |
| configurable : true, | |
| writable : false, | |
| value : function(prop) { | |
| var val = this[prop]; | |
| delete this[prop]; // remove accessors | |
| this[prop] = val; | |
| } | |
| }); | |
| } | |
| </script> | |
| <script type="text/javascript"> | |
| // helper | |
| var getEls = function(clazz){ | |
| return [].slice.call(document.getElementsByClassName(clazz)); | |
| }; | |
| var dataBind = function(a,b,c){a.watch(b,function(d,e,f){e='value',c.map(function(g){g[e in g&&(g.checked=!/[ox]$/.test(g.type)||f==g[e]||f===!0)?e:'innerHTML']=f,g.onchange=function(){a[b]=g.checked&&g[e]}})}),a[b]=a[b]}; | |
| // default values for the model | |
| var model = { | |
| text: "abcd", | |
| check: true, | |
| radio: 2, | |
| select: "Option #2", | |
| other: 10 | |
| }; | |
| dataBind(model, "text", getEls("text")); | |
| dataBind(model, "check", getEls("check")); | |
| dataBind(model, "radio", getEls("radio")); | |
| dataBind(model, "select", getEls("select")); | |
| dataBind(model, "other", getEls("other")); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment