da922b4e by Michael Richards

Merge pull request #5 from pgib/master

Event listener fix and minor documentation addition
2 parents b1d391a7 4a68a877
......@@ -10,11 +10,16 @@ Rivets.js is alpha software. While it should work well enough for prototyping an
No contrived example here yet, but the `rivets` module is simple. It exposes three main functions; a `configure` function that is used to set configuration options and the adapter interface, a `register` function that is used to register custom data bindings and a `bind` function that is used to bind a set of context objects to a DOM element.
The `bind` function takes two arguements; the parent DOM element that you wish to bind to and a set of context objects.
The `bind` function takes two arguments; the parent DOM element that you wish to bind to and a set of context objects.
rivets.bind(el, {user: currentUser, item: item});
Configuring Rivets.js is required before anything can be binded, as binding is dependant on having an adapter defined. Here's a sample configuration for using Rivets.js with Backbone.js.
Context objects are referenced in your data-binding declarations using dot-notation:
<input type="text" data-value="currentUser.email">
<input type="checkbox" data-enabled="item.active">
Configuring Rivets.js is required before anything can be bound, as binding is dependant on having an adapter defined. Here's a sample configuration for using Rivets.js with Backbone.js.
rivets.configure({
adapter: {
......@@ -22,15 +27,15 @@ Configuring Rivets.js is required before anything can be binded, as binding is d
obj.on('change:' + keypath, function(m, v) { callback(v) });
},
read: function(obj, keypath) {
obj.get(keypath);
return obj.get(keypath);
},
publish: function(obj, keypath, value) {
obj.set(keypath, data);
obj.set(keypath, value);
}
}
});
To add custom data bindings, use the `register` function and pass in an identifier for the binding as well as the binding function. Binding functions take two arguments; `el` which is the DOM element and `value` which is any new incomming value from the observed context object.
To add custom data bindings, use the `register` function and pass in an identifier for the binding as well as the binding function. Binding functions take two arguments; `el` which is the DOM element and `value` which is any new incoming value from the observed context object.
rivets.register('active', function(el, value){
el.className = value ? 'active' : 'inactive';
......
// Generated by CoffeeScript 1.3.1
// Generated by CoffeeScript 1.3.3
(function() {
var Rivets, attributeBinding, bidirectionals, getInputValue, rivets, stateBinding,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
......@@ -8,8 +8,6 @@
Rivets.Binding = (function() {
Binding.name = 'Binding';
function Binding(el, type, context, keypath, formatters) {
this.el = el;
this.type = type;
......@@ -48,7 +46,9 @@
return _this.set(value);
});
if (_ref = this.type, __indexOf.call(bidirectionals, _ref) >= 0) {
return this.el.addEventListener('change', function(el) {
return this.el.addEventListener('change', function(e) {
var el;
el = e.target || e.srcElement;
return Rivets.config.adapter.publish(_this.context, _this.keypath, getInputValue(el));
});
}
......@@ -60,8 +60,6 @@
Rivets.View = (function() {
View.name = 'View';
function View(el, contexts) {
this.el = el;
this.contexts = contexts;
......@@ -85,8 +83,9 @@
};
View.prototype.build = function() {
var attribute, context, dataRegExp, keypath, node, path, pipes, type, _i, _len, _ref, _results;
var attribute, bindingRegExp, context, keypath, node, path, pipes, type, _i, _len, _ref, _results;
this.bindings = [];
bindingRegExp = this.bindingRegExp();
_ref = this.el.getElementsByTagName('*');
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
......@@ -97,9 +96,8 @@
_results1 = [];
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
attribute = _ref1[_j];
dataRegExp = new RegExp(this.data, 'g');
if (this.bindingRegExp().test(attribute.name)) {
type = attribute.name.replace(this.bindingRegExp(), '');
if (bindingRegExp.test(attribute.name)) {
type = attribute.name.replace(bindingRegExp, '');
pipes = attribute.value.split('|').map(function(pipe) {
return pipe.trim();
});
......
......@@ -31,7 +31,8 @@ class Rivets.Binding
Rivets.config.adapter.subscribe @context, @keypath, (value) => @set value
if @type in bidirectionals
@el.addEventListener 'change', (el) =>
@el.addEventListener 'change', (e) =>
el = e.target or e.srcElement
Rivets.config.adapter.publish @context, @keypath, getInputValue el
# Parses and stores the binding data for an entire view binding.
......@@ -50,11 +51,12 @@ class Rivets.View
build: =>
@bindings = []
bindingRegExp = @bindingRegExp()
for node in @el.getElementsByTagName '*'
for attribute in node.attributes
dataRegExp = new RegExp(@data, 'g')
if @bindingRegExp().test attribute.name
type = attribute.name.replace @bindingRegExp(), ''
if bindingRegExp.test attribute.name
type = attribute.name.replace bindingRegExp, ''
pipes = attribute.value.split('|').map (pipe) -> pipe.trim()
path = pipes.shift().split '.'
context = @contexts[path.shift()]
......