JSFiddle - React, Tailwind, and code Playground
by ifandelse
HTML
<script src="http://underscorejs.org/underscore.js"></script>
JavaScript
var emitter = {
_callbacks: [],
_observe: function(callback) {
var self = this;
self._callbacks.push(callback);
return function() {
self._callbacks = _.without(self._callbacks, callback);
}
},
_notify: function() {
_.each(this._callbacks, function(callback) {
callback.apply(this, arguments);
});
}
};
var wrap = function(subject, target, memberName) {
Object.defineProperty(target, memberName, {
set: function(value) {
// check if it's not a primitive and wrap it if so
var oldValue = subject[memberName];
subject[memberName] = value;
target._notify("set", memberName, oldValue, value);
},
get: function() {
target._notify("get", memberName);
return subject[memberName];
},
enumerable: true,
configurable: true
});
};
var behavior = {
'object': function(subject, target, memberName) {
target[memberName] = proxify(subject);
},
'array' : function(subject, target, memberName) {
target[memberName] = proxify(subject);
},
'primitive' : function(subject, target, memberName) {
wrap(subject, target, memberName);
}
};
var getMemberType = function(member) {
return typeof member === 'function' ? 'function'
: _.isArray(member) ? 'array'
: _.isObject(member) ? 'object' : 'primitive';
}
var proxify = function(subject) {
var target = _.extend({}, emitter);
var member;
var memberType;
for(member in subject) {
memberType = getMemberType(subject[member]);
behavior[memberType](subject, target, member);
}
return target;
};
var person = {
firstName: "Jim",
lastName: "Cowart",
location: {
city: "Signal Mountain",
state: "TN",
zip: 37377
}
};
var proxy...