Skip to content

brainfood / rivets

Go to a project
Toggle navigation
Toggle navigation pinning
67c5564b by Michael Richards
Options

Build 0.3.2.

1 parent 58598d14
Inline Side-by-side
Showing 5 changed files with 108 additions and 24 deletions
# Rivets.js
Rivets.js is a declarative data binding facility that plays well with existing frameworks such as [Backbone.js](http://backbonejs.org), [Spine.js](http://spinejs.com) and [Stapes.js](http://hay.github.com/stapes/). It aims to be lightweight (1.9KB minified and gzipped), extensible, and configurable to work with any event-driven model.
Rivets.js is a declarative data binding facility that plays well with existing frameworks such as [Backbone.js](http://backbonejs.org), [Spine.js](http://spinejs.com) and [Stapes.js](http://hay.github.com/stapes/). It aims to be lightweight (2.3KB minified and gzipped), extensible, and configurable to work with any event-driven model.
---
......
// rivets.js
// version: 0.3.1
// version: 0.3.2
// author: Michael Richards
// license: MIT
(function() {
var Rivets, attributeBinding, bindEvent, eventBinding, getInputValue, rivets, unbindEvent,
var Rivets, attributeBinding, bindEvent, eventBinding, getInputValue, iterationBinding, rivets, unbindEvent,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__slice = [].slice,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
......@@ -34,11 +34,16 @@
this.formattedValue = __bind(this.formattedValue, this);
if (this.options.special === "event") {
this.routine = eventBinding(this.type);
} else {
this.routine = Rivets.routines[this.type] || attributeBinding(this.type);
this.routine = (function() {
switch (this.options.special) {
case "event":
return eventBinding(this.type);
case "iteration":
return iterationBinding(this.type);
default:
return Rivets.routines[this.type] || attributeBinding(this.type);
}
}).call(this);
this.formatters = this.options.formatters || [];
}
......@@ -61,9 +66,11 @@
if (this.options.special === "event") {
this.routine(this.el, value, this.currentListener);
return this.currentListener = value;
} else if (this.options.special === "iteration") {
return this.routine(this.el, value, this);
} else {
if (value instanceof Function) {
value = value();
value = value.call(this.model);
}
return this.routine(this.el, value);
}
......@@ -104,6 +111,7 @@
Binding.prototype.unbind = function() {
var callback, keypath, _i, _len, _ref, _ref1, _ref2;
if (!this.options.bypass) {
Rivets.config.adapter.unsubscribe(this.model, this.keypath, this.set);
if ((_ref = this.options.dependencies) != null ? _ref.length : void 0) {
_ref1 = this.options.dependencies;
......@@ -116,6 +124,7 @@
if (_ref2 = this.type, __indexOf.call(this.bidirectionals, _ref2) >= 0) {
return this.el.removeEventListener('change', this.publish);
}
}
};
return Binding;
......@@ -152,36 +161,57 @@
};
View.prototype.build = function() {
var bindingRegExp, el, eventRegExp, node, parseNode, _i, _len, _ref, _results,
var bindingRegExp, el, eventRegExp, iterationRegExp, iterator, node, parseNode, skipNodes, _i, _len, _ref, _results,
_this = this;
this.bindings = [];
skipNodes = [];
iterator = null;
bindingRegExp = this.bindingRegExp();
eventRegExp = /^on-/;
iterationRegExp = /^each-/;
parseNode = function(node) {
var attribute, context, ctx, dependencies, keypath, model, options, path, pipe, pipes, splitPath, type, _i, _len, _ref, _results;
var a, attribute, binding, context, ctx, dependencies, keypath, model, n, options, path, pipe, pipes, splitPath, type, _i, _j, _k, _l, _len, _len1, _len2, _len3, _ref, _ref1, _ref2, _results;
if (__indexOf.call(skipNodes, node) < 0) {
_ref = node.attributes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
attribute = _ref[_i];
if (bindingRegExp.test(attribute.name)) {
type = attribute.name.replace(bindingRegExp, '');
if (iterationRegExp.test(type)) {
if (!_this.models[type.replace(iterationRegExp, '')]) {
_ref1 = node.getElementsByTagName('*');
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
n = _ref1[_j];
skipNodes.push(n);
}
iterator = [attribute];
}
}
}
}
_ref2 = iterator || node.attributes;
_results = [];
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
attribute = _ref2[_k];
if (bindingRegExp.test(attribute.name)) {
options = {};
type = attribute.name.replace(bindingRegExp, '');
pipes = (function() {
var _j, _len1, _ref1, _results1;
_ref1 = attribute.value.split('|');
var _l, _len3, _ref3, _results1;
_ref3 = attribute.value.split('|');
_results1 = [];
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
pipe = _ref1[_j];
for (_l = 0, _len3 = _ref3.length; _l < _len3; _l++) {
pipe = _ref3[_l];
_results1.push(pipe.trim());
}
return _results1;
})();
context = (function() {
var _j, _len1, _ref1, _results1;
_ref1 = pipes.shift().split('>');
var _l, _len3, _ref3, _results1;
_ref3 = pipes.shift().split('>');
_results1 = [];
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
ctx = _ref1[_j];
for (_l = 0, _len3 = _ref3.length; _l < _len3; _l++) {
ctx = _ref3[_l];
_results1.push(ctx.trim());
}
return _results1;
......@@ -192,6 +222,7 @@
model = _this.models[splitPath.shift()];
options.bypass = path.indexOf(":") !== -1;
keypath = splitPath.join();
if (model) {
if (dependencies = context.shift()) {
options.dependencies = dependencies.split(/\s+/);
}
......@@ -199,12 +230,27 @@
type = type.replace(eventRegExp, '');
options.special = "event";
}
_results.push(_this.bindings.push(new Rivets.Binding(node, type, model, keypath, options)));
if (iterationRegExp.test(type)) {
type = type.replace(iterationRegExp, '');
options.special = "iteration";
}
binding = new Rivets.Binding(node, type, model, keypath, options);
binding.view = _this;
_this.bindings.push(binding);
}
}
if (iterator) {
for (_l = 0, _len3 = iterator.length; _l < _len3; _l++) {
a = iterator[_l];
node.removeAttribute(a.name);
}
_results.push(iterator = null);
} else {
_results.push(void 0);
}
}
return _results;
}
};
_ref = this.els;
_results = [];
......@@ -289,6 +335,44 @@
};
};
iterationBinding = function(name) {
return function(el, collection, binding) {
var data, item, itemEl, iteration, m, n, previous, _i, _j, _len, _len1, _ref, _ref1, _results;
if (binding.iterated != null) {
_ref = binding.iterated;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
iteration = _ref[_i];
iteration.view.unbind();
iteration.el.parentNode.removeChild(iteration.el);
}
} else {
binding.marker = document.createComment(" rivets: each-" + name + " ");
el.parentNode.insertBefore(binding.marker, el);
el.parentNode.removeChild(el);
}
binding.iterated = [];
_results = [];
for (_j = 0, _len1 = collection.length; _j < _len1; _j++) {
item = collection[_j];
data = {};
_ref1 = binding.view.models;
for (n in _ref1) {
m = _ref1[n];
data[n] = m;
}
data[name] = item;
itemEl = el.cloneNode(true);
previous = binding.iterated[binding.iterated.length - 1] || binding.marker;
binding.marker.parentNode.insertBefore(itemEl, previous.nextSibling);
_results.push(binding.iterated.push({
el: itemEl,
view: rivets.bind(itemEl, data)
}));
}
return _results;
};
};
attributeBinding = function(attr) {
return function(el, value) {
if (value) {
......
// rivets.js
// version: 0.3.1
// version: 0.3.2
// author: Michael Richards
// license: MIT
(function(){var a,b,c,d,e,f,g,h=function(a,b){return function(){return a.apply(b,arguments)}},i=[].slice,j=[].indexOf||function(a){for(var b=0,c=this.length;b<c;b++)if(b in this&&this[b]===a)return b;return-1};a={},String.prototype.trim||(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")}),a.Binding=function(){function f(c,e,f,g,i){this.el=c,this.type=e,this.model=f,this.keypath=g,this.options=i!=null?i:{},this.unbind=h(this.unbind,this),this.publish=h(this.publish,this),this.bind=h(this.bind,this),this.set=h(this.set,this),this.formattedValue=h(this.formattedValue,this),this.options.special==="event"?this.routine=d(this.type):this.routine=a.routines[this.type]||b(this.type),this.formatters=this.options.formatters||[]}return f.prototype.bidirectionals=["value","checked","unchecked"],f.prototype.formattedValue=function(b){var c,d,e,f,g,h,j,k;h=this.formatters;for(f=0,g=h.length;f<g;f++)d=h[f],c=d.split(/\s+/),e=c.shift(),b=this.model[e]instanceof Function?(j=this.model)[e].apply(j,[b].concat(i.call(c))):a.formatters[e]?(k=a.formatters)[e].apply(k,[b].concat(i.call(c))):void 0;return b},f.prototype.set=function(a){return a=this.formattedValue(a),this.options.special==="event"?(this.routine(this.el,a,this.currentListener),this.currentListener=a):(a instanceof Function&&(a=a()),this.routine(this.el,a))},f.prototype.bind=function(){var b,d,e,f,g,h,i,k=this;this.options.bypass?this.set(this.model[this.keypath]):(a.config.adapter.subscribe(this.model,this.keypath,this.set),a.config.preloadData&&this.set(a.config.adapter.read(this.model,this.keypath)));if((g=this.options.dependencies)!=null?g.length:void 0){this.dependencyCallbacks={},h=this.options.dependencies;for(e=0,f=h.length;e<f;e++)d=h[e],b=this.dependencyCallbacks[d]=function(b){return k.set(k.options.bypass?k.model[k.keypath]:a.config.adapter.read(k.model,k.keypath))},a.config.adapter.subscribe(this.model,d,b)}if(i=this.type,j.call(this.bidirectionals,i)>=0)return c(this.el,"change",this.publish)},f.prototype.publish=function(b){var c;return c=b.target||b.srcElement,a.config.adapter.publish(this.model,this.keypath,e(c))},f.prototype.unbind=function(){var b,c,d,e,f,g,h;a.config.adapter.unsubscribe(this.model,this.keypath,this.set);if((f=this.options.dependencies)!=null?f.length:void 0){g=this.options.dependencies;for(d=0,e=g.length;d<e;d++)c=g[d],b=this.dependencyCallbacks[c],a.config.adapter.unsubscribe(this.model,c,b)}if(h=this.type,j.call(this.bidirectionals,h)>=0)return this.el.removeEventListener("change",this.publish)},f}(),a.View=function(){function b(a,b){this.els=a,this.models=b,this.unbind=h(this.unbind,this),this.bind=h(this.bind,this),this.build=h(this.build,this),this.bindingRegExp=h(this.bindingRegExp,this),this.els.jquery||this.els instanceof Array||(this.els=[this.els]),this.build()}return b.prototype.bindingRegExp=function(){var b;return b=a.config.prefix,b?new RegExp("^data-"+b+"-"):/^data-/},b.prototype.build=function(){var b,c,d,e,f,g,h,i,j,k=this;this.bindings=[],b=this.bindingRegExp(),d=/^on-/,f=function(c){var e,f,g,h,i,j,l,m,n,o,p,q,r,s,t,u;t=c.attributes,u=[];for(r=0,s=t.length;r<s;r++){e=t[r];if(b.test(e.name)){l={},q=e.name.replace(b,""),o=function(){var a,b,c,d;c=e.value.split("|"),d=[];for(a=0,b=c.length;a<b;a++)n=c[a],d.push(n.trim());return d}(),f=function(){var a,b,c,d;c=o.shift().split(">"),d=[];for(a=0,b=c.length;a<b;a++)g=c[a],d.push(g.trim());return d}(),m=f.shift(),p=m.split(/\.|:/),l.formatters=o,j=k.models[p.shift()],l.bypass=m.indexOf(":")!==-1,i=p.join();if(h=f.shift())l.dependencies=h.split(/\s+/);d.test(q)&&(q=q.replace(d,""),l.special="event"),u.push(k.bindings.push(new a.Binding(c,q,j,i,l)))}else u.push(void 0)}return u},i=this.els,j=[];for(g=0,h=i.length;g<h;g++)c=i[g],f(c),j.push(function(){var a,b,d,g;d=c.getElementsByTagName("*"),g=[];for(a=0,b=d.length;a<b;a++)e=d[a],g.push(f(e));return g}());return j},b.prototype.bind=function(){var a,b,c,d,e;d=this.bindings,e=[];for(b=0,c=d.length;b<c;b++)a=d[b],e.push(a.bind());return e},b.prototype.unbind=function(){var a,b,c,d,e;d=this.bindings,e=[];for(b=0,c=d.length;b<c;b++)a=d[b],e.push(a.unbind());return e},b}(),c=function(a,b,c){return window.addEventListener?a.addEventListener(b,c,!1):(b="on"+b,a.attachEvent(b,c))},g=function(a,b,c){return window.removeEventListener?a.removeEventListener(b,c,!1):(b="on"+b,a.detachEvent(b,c))},e=function(a){switch(a.type){case"checkbox":return a.checked;default:return a.value}},d=function(a){return function(b,d,e){d&&c(b,a,d);if(e)return g(b,a,e)}},b=function(a){return function(b,c){return c?b.setAttribute(a,c):b.removeAttribute(a)}},a.routines={enabled:function(a,b){return a.disabled=!b},disabled:function(a,b){return a.disabled=!!b},checked:function(a,b){return a.type==="radio"?a.checked=a.value===b:a.checked=!!b},unchecked:function(a,b){return a.type==="radio"?a.checked=a.value!==b:a.checked=!b},show:function(a,b){return a.style.display=b?"":"none"},hide:function(a,b){return a.style.display=b?"none":""},html:function(a,b){return a.innerHTML=b!=null?b:""},value:function(a,b){return a.value=b!=null?b:""},text:function(a,b){return a.innerText!=null?a.innerText=b!=null?b:"":a.textContent=b!=null?b:""}},a.config={preloadData:!0},a.formatters={},f={routines:a.routines,formatters:a.formatters,config:a.config,configure:function(b){var c,d,e;b==null&&(b={}),e=[];for(c in b)d=b[c],e.push(a.config[c]=d);return e},bind:function(b,c){var d;return c==null&&(c={}),d=new a.View(b,c),d.bind(),d}},typeof module!="undefined"&&module!==null?module.exports=f:this.rivets=f}).call(this);
\ No newline at end of file
(function(){var a,b,c,d,e,f,g,h,i=function(a,b){return function(){return a.apply(b,arguments)}},j=[].slice,k=[].indexOf||function(a){for(var b=0,c=this.length;b<c;b++)if(b in this&&this[b]===a)return b;return-1};a={},String.prototype.trim||(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")}),a.Binding=function(){function g(c,e,g,h,j){this.el=c,this.type=e,this.model=g,this.keypath=h,this.options=j!=null?j:{},this.unbind=i(this.unbind,this),this.publish=i(this.publish,this),this.bind=i(this.bind,this),this.set=i(this.set,this),this.formattedValue=i(this.formattedValue,this),this.routine=function(){switch(this.options.special){case"event":return d(this.type);case"iteration":return f(this.type);default:return a.routines[this.type]||b(this.type)}}.call(this),this.formatters=this.options.formatters||[]}return g.prototype.bidirectionals=["value","checked","unchecked"],g.prototype.formattedValue=function(b){var c,d,e,f,g,h,i,k;h=this.formatters;for(f=0,g=h.length;f<g;f++)d=h[f],c=d.split(/\s+/),e=c.shift(),b=this.model[e]instanceof Function?(i=this.model)[e].apply(i,[b].concat(j.call(c))):a.formatters[e]?(k=a.formatters)[e].apply(k,[b].concat(j.call(c))):void 0;return b},g.prototype.set=function(a){return a=this.formattedValue(a),this.options.special==="event"?(this.routine(this.el,a,this.currentListener),this.currentListener=a):this.options.special==="iteration"?this.routine(this.el,a,this):(a instanceof Function&&(a=a.call(this.model)),this.routine(this.el,a))},g.prototype.bind=function(){var b,d,e,f,g,h,i,j=this;this.options.bypass?this.set(this.model[this.keypath]):(a.config.adapter.subscribe(this.model,this.keypath,this.set),a.config.preloadData&&this.set(a.config.adapter.read(this.model,this.keypath)));if((g=this.options.dependencies)!=null?g.length:void 0){this.dependencyCallbacks={},h=this.options.dependencies;for(e=0,f=h.length;e<f;e++)d=h[e],b=this.dependencyCallbacks[d]=function(b){return j.set(j.options.bypass?j.model[j.keypath]:a.config.adapter.read(j.model,j.keypath))},a.config.adapter.subscribe(this.model,d,b)}if(i=this.type,k.call(this.bidirectionals,i)>=0)return c(this.el,"change",this.publish)},g.prototype.publish=function(b){var c;return c=b.target||b.srcElement,a.config.adapter.publish(this.model,this.keypath,e(c))},g.prototype.unbind=function(){var b,c,d,e,f,g,h;if(!this.options.bypass){a.config.adapter.unsubscribe(this.model,this.keypath,this.set);if((f=this.options.dependencies)!=null?f.length:void 0){g=this.options.dependencies;for(d=0,e=g.length;d<e;d++)c=g[d],b=this.dependencyCallbacks[c],a.config.adapter.unsubscribe(this.model,c,b)}if(h=this.type,k.call(this.bidirectionals,h)>=0)return this.el.removeEventListener("change",this.publish)}},g}(),a.View=function(){function b(a,b){this.els=a,this.models=b,this.unbind=i(this.unbind,this),this.bind=i(this.bind,this),this.build=i(this.build,this),this.bindingRegExp=i(this.bindingRegExp,this),this.els.jquery||this.els instanceof Array||(this.els=[this.els]),this.build()}return b.prototype.bindingRegExp=function(){var b;return b=a.config.prefix,b?new RegExp("^data-"+b+"-"):/^data-/},b.prototype.build=function(){var b,c,d,e,f,g,h,i,j,l,m,n,o=this;this.bindings=[],i=[],f=null,b=this.bindingRegExp(),d=/^on-/,e=/^each-/,h=function(c){var g,h,j,l,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J;if(k.call(i,c)<0){G=c.attributes;for(y=0,C=G.length;y<C;y++){h=G[y];if(b.test(h.name)){x=h.name.replace(b,"");if(e.test(x)&&!o.models[x.replace(e,"")]){H=c.getElementsByTagName("*");for(z=0,D=H.length;z<D;z++)r=H[z],i.push(r);f=[h]}}}I=f||c.attributes,J=[];for(A=0,E=I.length;A<E;A++){h=I[A];if(b.test(h.name)){s={},x=h.name.replace(b,""),v=function(){var a,b,c,d;c=h.value.split("|"),d=[];for(a=0,b=c.length;a<b;a++)u=c[a],d.push(u.trim());return d}(),l=function(){var a,b,c,d;c=v.shift().split(">"),d=[];for(a=0,b=c.length;a<b;a++)m=c[a],d.push(m.trim());return d}(),t=l.shift(),w=t.split(/\.|:/),s.formatters=v,q=o.models[w.shift()],s.bypass=t.indexOf(":")!==-1,p=w.join();if(q){if(n=l.shift())s.dependencies=n.split(/\s+/);d.test(x)&&(x=x.replace(d,""),s.special="event"),e.test(x)&&(x=x.replace(e,""),s.special="iteration"),j=new a.Binding(c,x,q,p,s),j.view=o,o.bindings.push(j)}}if(f){for(B=0,F=f.length;B<F;B++)g=f[B],c.removeAttribute(g.name);J.push(f=null)}else J.push(void 0)}return J}},m=this.els,n=[];for(j=0,l=m.length;j<l;j++)c=m[j],h(c),n.push(function(){var a,b,d,e;d=c.getElementsByTagName("*"),e=[];for(a=0,b=d.length;a<b;a++)g=d[a],e.push(h(g));return e}());return n},b.prototype.bind=function(){var a,b,c,d,e;d=this.bindings,e=[];for(b=0,c=d.length;b<c;b++)a=d[b],e.push(a.bind());return e},b.prototype.unbind=function(){var a,b,c,d,e;d=this.bindings,e=[];for(b=0,c=d.length;b<c;b++)a=d[b],e.push(a.unbind());return e},b}(),c=function(a,b,c){return window.addEventListener?a.addEventListener(b,c,!1):(b="on"+b,a.attachEvent(b,c))},h=function(a,b,c){return window.removeEventListener?a.removeEventListener(b,c,!1):(b="on"+b,a.detachEvent(b,c))},e=function(a){switch(a.type){case"checkbox":return a.checked;default:return a.value}},d=function(a){return function(b,d,e){d&&c(b,a,d);if(e)return h(b,a,e)}},f=function(a){return function(b,c,d){var e,f,h,i,j,k,l,m,n,o,p,q,r,s;if(d.iterated!=null){q=d.iterated;for(m=0,o=q.length;m<o;m++)i=q[m],i.view.unbind(),i.el.parentNode.removeChild(i.el)}else d.marker=document.createComment(" rivets: each-"+a+" "),b.parentNode.insertBefore(d.marker,b),b.parentNode.removeChild(b);d.iterated=[],s=[];for(n=0,p=c.length;n<p;n++){f=c[n],e={},r=d.view.models;for(k in r)j=r[k],e[k]=j;e[a]=f,h=b.cloneNode(!0),l=d.iterated[d.iterated.length-1]||d.marker,d.marker.parentNode.insertBefore(h,l.nextSibling),s.push(d.iterated.push({el:h,view:g.bind(h,e)}))}return s}},b=function(a){return function(b,c){return c?b.setAttribute(a,c):b.removeAttribute(a)}},a.routines={enabled:function(a,b){return a.disabled=!b},disabled:function(a,b){return a.disabled=!!b},checked:function(a,b){return a.type==="radio"?a.checked=a.value===b:a.checked=!!b},unchecked:function(a,b){return a.type==="radio"?a.checked=a.value!==b:a.checked=!b},show:function(a,b){return a.style.display=b?"":"none"},hide:function(a,b){return a.style.display=b?"none":""},html:function(a,b){return a.innerHTML=b!=null?b:""},value:function(a,b){return a.value=b!=null?b:""},text:function(a,b){return a.innerText!=null?a.innerText=b!=null?b:"":a.textContent=b!=null?b:""}},a.config={preloadData:!0},a.formatters={},g={routines:a.routines,formatters:a.formatters,config:a.config,configure:function(b){var c,d,e;b==null&&(b={}),e=[];for(c in b)d=b[c],e.push(a.config[c]=d);return e},bind:function(b,c){var d;return c==null&&(c={}),d=new a.View(b,c),d.bind(),d}},typeof module!="undefined"&&module!==null?module.exports=g:this.rivets=g}).call(this);
\ No newline at end of file
......
{
"name" : "rivets",
"description" : "Declarative data binding facility.",
"version" : "0.3.1",
"version" : "0.3.2",
"author" : "Michael Richards",
"url" : "http://rivetsjs.com",
"main" : "./lib/rivets.js",
......
# rivets.js
# version : 0.3.1
# version : 0.3.2
# author : Michael Richards
# license : MIT
......