Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

consolidate computed and property. updated README

  • Loading branch information...
commit a65af32b5622071790f4757c910b7b15f896a5db 1 parent fb4f6ab
weepy authored
Showing with 197 additions and 159 deletions.
  1. +41 −5 README.md
  2. +0 −5 index.html
  3. +156 −149 lib/o_O.js
View
46 README.md
@@ -1,8 +1,44 @@
-o_O
-===
+FunnyFace.js
+============
-funnyface.js
+```
+ ,ad8888ba,
+ d8"' `"8b
+ d8' `8b
+ ,adPPYba, 88 88 HTML binding for Lulz
+ a8" "8a 88 88
+ 8b d8 Y8, ,8P Tiny, Elegant & flexible html binding
+ "8a, ,a8" Y8a. .a8P
+ `"YbbdP"' `"Y8888Y"' Provides an easy to bind an object to a section of HTML
-HTML binding.
+ 888888888888 Proxies through jQuery (or whatever $ is)
-Check out index.html
+ Built in automatic dependency resolution makes hooking up code a dream
+
+ (c) 2012 by weepy, MIT Licensed
+```
+
+
+Simple Example
+--------------
+
+```
+<div id=person bind='text: this'></div>
+
+var name = o_O.property('John')
+
+name.bindTo('#person')
+
+// HTML text is now 'John'
+
+name('Bob')
+
+// HTML text is now 'Bob'
+
+```
+
+Todo
+----
+
+* Better example
+* Website
View
5 index.html
@@ -64,7 +64,6 @@
</div>
<script>
-
var company = {
people: o_O.collection([
new Person('Bobby', 'Reado', 30 ),
@@ -75,9 +74,5 @@
o_O.bind(company, '#persons')
company.people.add( new Person('ZZBobby', 'Reado', 30 ) )
-
-
company.people.remove(company.people.find(1))
-
-
</script>
View
305 lib/o_O.js
@@ -1,47 +1,70 @@
;(function() {
-
+/*
+
+ ,ad8888ba, FunnyFace.js
+ d8"' `"8b ============
+ d8' `8b
+ ,adPPYba, 88 88 HTML binding for Lulz
+a8" "8a 88 88
+8b d8 Y8, ,8P Elegant, flexible html binding
+"8a, ,a8" Y8a. .a8P
+ `"YbbdP"' `"Y8888Y"' Provides an easy to bind an object to a section of HTML
+
+ 888888888888 Proxies through jQuery (or whatever $ is)
+
+ Built in automatic dependency resolution makes hooking up code a dream
+
+ (c) 2012 by weepy, MIT Licensed
+
+
+
+
+ ***
+ * Root element. Does nothing - maybe one day
+ */
function o_O() {};
-/* _ _
- _____ _____ _ _| |_(_)______
- / -_) V / -_) ' \ _| |_ / -_)
- \___|\_/\___|_||_\__|_/__\___| */
-
+
+/********* _ _
+ * _____ _____ _ _| |_(_)______
+ * / -_) V / -_) ' \ _| |_ / -_)
+ * \___|\_/\___|_||_\__|_/__\___|
+ */
(function(exports) {
- var methods = {
- on : function(event, fct){
- this._events = this._events || {};
- this._events[event] = this._events[event] || [];
- this._events[event].push(fct);
- },
- off : function(event, fct){
- this._events = this._events || {};
- if( event in this._events === false ) return;
- this._events[event].splice(this._events[event].indexOf(fct), 1);
- },
- once: function(event, fct) {
- var fn = function() {
- fct.apply(this, arguments)
- this.off(event, fn)
- }
- this.on(event, fn)
- },
- emit : function(event /* , args... */){
- this._events = this._events || {};
- if( event in this._events === false ) return;
- for(var i = 0; i < this._events[event].length; i++){
- this._events[event][i].apply(this, Array.prototype.slice.call(arguments, 1))
- }
- }
- }
-
- o_O.eventize = function(o) {
- o.on = methods.on
- o.off = methods.off
- o.emit = methods.emit
- o.once = methods.once
- }
+ var methods = {
+ on : function(event, fct){
+ this._events = this._events || {};
+ this._events[event] = this._events[event] || [];
+ this._events[event].push(fct);
+ },
+ off : function(event, fct){
+ this._events = this._events || {};
+ if( event in this._events === false ) return;
+ this._events[event].splice(this._events[event].indexOf(fct), 1);
+ },
+ once: function(event, fct) {
+ var fn = function() {
+ fct.apply(this, arguments)
+ this.off(event, fn)
+ }
+ this.on(event, fn)
+ },
+ emit : function(event /* , args... */){
+ this._events = this._events || {};
+ if( event in this._events === false ) return;
+ for(var i = 0; i < this._events[event].length; i++){
+ this._events[event][i].apply(this, Array.prototype.slice.call(arguments, 1))
+ }
+ }
+ }
+
+ o_O.eventize = function(o) {
+ o.on = methods.on
+ o.off = methods.off
+ o.emit = methods.emit
+ o.once = methods.once
+ }
})()
@@ -54,10 +77,8 @@ function o_O() {};
|___/ */
/**
- * o_O.bind will proxy to any method on a $ object
- * but sometimes you want something more
+ * Overrides for $ proxies
*/
-
o_O.exten$ions = {
/* set the class
* usage: bind='class: myClass'
@@ -69,76 +90,76 @@ o_O.exten$ions = {
* usage: bind='value: myProperty'
*/
value: function(property) {
- var self = this;
-
- property.on('set', function(val) {
- $(self).val(val)
- })
-
+ var self = this;
+
+ property.on('set', function(val) {
+ $(self).val(val)
+ })
+
$(this).change(function(e) {
property( $(e.srcElement).val(), e)
})
- property.rewrite()
+ property.rewrite()
}
}
function trim(s) {
- return s.replace(/^\s+|\s+$/g, '')
+ return s.replace(/^\s+|\s+$/g, '')
}
o_O.bind = function(context, el) {
var $el = $(el)
- context.el = $el[0]
- context.$ = $el
-
- function bind(k, v) {
- var $$ = $(this)
- var rules = trim($$.attr("bind")).split(";")
-
- rules.forEach(function(rule) {
+ context.el = $el[0]
+ context.$ = $el
+
+ function bind(k, v) {
+ var $$ = $(this)
+ var rules = trim($$.attr("bind")).split(";")
+
+ rules.forEach(function(rule) {
rule = trim(rule)
- if(!rule) return // for trailing ;
-
- var bits = trim(rule).split(":").map(trim)
- var attr = trim(bits.shift())
- var param = trim(bits.join(":"))
-
- var deps = o_O.deps(param, context)
-
- function run() {
-
- var x = o_O.expression(param).call(context)
- var fn = o_O.exten$ions[attr] || $$[attr]
+ if(!rule) return // for trailing ;
+
+ var bits = trim(rule).split(":").map(trim)
+ var attr = trim(bits.shift())
+ var param = trim(bits.join(":"))
+
+ var deps = o_O.deps(param, context)
+
+ function run() {
+
+ var x = o_O.expression(param).call(context)
+ var fn = o_O.exten$ions[attr] || $$[attr]
if(!fn) throw new Error("Could not find attr '" + attr + "' in $ or o_O.exten$ions")
- fn.call($$, x)
- }
-
- run()
-
- deps.forEach(function(dep) {
- dep.on('set', run)
- })
- })
-
+ fn.call($$, x)
+ }
+
+ run()
+
+ deps.forEach(function(dep) {
+ dep.on('set', run)
+ })
+ })
+
$$.attr("bind",null)
- }
-
- $el.filter("[bind]").each(function(k, v) {
- bind.call(this, k, v)
- })
-
- $el.find("[bind]").each(function(k, v) {
- bind.call(this, k, v)
- })
-
- return $el
+ }
+
+ $el.filter("[bind]").each(function(k, v) {
+ bind.call(this, k, v)
+ })
+
+ $el.find("[bind]").each(function(k, v) {
+ bind.call(this, k, v)
+ })
+
+ return $el
}
// probably don't need/want this cache
o_O.expression = function(expr) {
- return new Function('with(this) { return (' + expr + ')}')
+ return new Function('with(this) { return (' + expr + ')}')
}
@@ -158,77 +179,63 @@ o_O.val = function(fn) {
| .__/|_| \___/| .__/ \___|_| \__|\__, |
|_| |_| |___/
-*/
-
-
-/**
+ ******
* Our workhorse
* property returns an observable
- * which can be set like prop(val) and got like prop()
+ * that can be set like prop(val) and got like prop()
* it trigger's set events
* it also automatically figures out it's deps on other o_O.properties
* a function can also be passed in for computed properties
*/
+
o_O.property = function(value) {
- if(typeof value == 'function') return o_O.computed(value)
-
- function prop(v) {
- if(arguments.length) {
- prop.val = v
- prop.emit('set', v, prop)
- } else {
- o_O.deps.emit('get', prop)
- return prop.val
- }
+ var getset = value
+
+ if(typeof value != 'function') {
+ getset = function(value) {
+ if(arguments.length) getset.val = value
+ return getset.val
+ }
+ getset(value)
}
-
- o_O.eventize(prop)
- prop.val = value
- prop.deps = []
- prop.rewrite = function() { prop(prop()) }
-
- return prop
-}
-
-o_O.computed = function(getset) {
- function prop(v) {
- if(arguments.length) {
- prop.val = getset(v)
- prop.emit('set', v, prop)
- } else {
- o_O.deps.emit('get', prop)
- return prop.val = getset()
- }
- }
-
- o_O.eventize(prop)
- prop.deps = o_O.deps(getset)
- prop.val = o_O.deps.lastResult
- prop.rewrite = function() { prop(prop())}
- return prop
+
+ function prop(v) {
+ if(arguments.length) {
+ prop.val = getset(v)
+ prop.emit('set', v, prop)
+ } else {
+ o_O.deps.emit('get', prop)
+ return prop.val = getset()
+ }
+ }
+
+ o_O.eventize(prop)
+ prop.deps = o_O.deps(getset)
+ prop.val = o_O.deps.lastResult
+ prop.rewrite = function() { prop(prop())}
+ prop.bindTo = function(el) {
+ o_O.bind(prop, el)
+ return prop
+ }
+
+ return prop
}
-// prop.bindTo = function(el) {
-// o_O.bind(prop, el)
-// }
-
-
-
o_O.deps = function(expr, context) {
- if(typeof expr == 'string') expr = o_O.expression(expr)
-
- var deps = []
- var collector = function(dep) {
- if(deps.indexOf(dep) < 0 && expr != dep) deps.push(dep)
- }
- // capture deps
- o_O.deps.on('get', collector)
- o_O.deps.lastResult = expr.call(context)
- o_O.deps.off('get', collector)
+ if(typeof expr == 'string') expr = o_O.expression(expr)
+
+ var deps = []
+ var collector = function(dep) {
+ if(deps.indexOf(dep) < 0 && expr != dep) deps.push(dep)
+ }
+ // capture deps
+ o_O.deps.on('get', collector)
+ o_O.deps.lastResult = expr.call(context)
+ o_O.deps.off('get', collector)
- return deps
+ return deps
}
o_O.eventize(o_O.deps)
Please sign in to comment.
Something went wrong with that request. Please try again.