Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bindable using an instance cache and uuids in datasets
window.Bindable = (function() {
'use strict';
function Bindable(context, dataKey) {
this.uuid = 0
this.cache = {}
this.context = context || document
this.dataKey = dataKey || 'data-bindable'
this.instanceKey = this.dataKey.replace(/data-/g, '') + 'Id'
}
Bindable.prototype.bindables = function(context) {
if (context == null) {
var context = this.context;
}
return context.querySelectorAll('[' + this.dataKey + ']')
};
Bindable.prototype.rebind = function(context, fn) {
this.dispose(context)
if (typeof fn === 'function') {
fn()
}
this.bindAll(context)
};
Bindable.prototype.bindAll = function(context) {
var bindables = this.bindables(context)
for (var i = 0, len = bindables.length; i < len; i += 1) {
this.bind(bindables[i])
}
return this
};
Bindable.prototype.getInstanceFromEl = function(el) {
return this.cache[this.cacheId(el)]
};
Bindable.prototype.cacheId = function(el) {
if (!el.dataset[this.instanceKey]) return;
return parseInt(el.dataset[this.instanceKey], 10)
};
Bindable.prototype.getRefs = function(context) {
var bindables = this.bindables(context)
var refs = []
for (var i = 0, len = bindables.length; i < len; i += 1) {
refs.push(this.getInstanceFromEl(bindables[i]))
}
return refs
};
Bindable.prototype.removeInstance = function(el) {
var instance, id;
console.log('removeInstance', this.cacheId(el))
if (instance = this.getInstanceFromEl(el)) {
console.log('instance', instance)
if (typeof instance.dispose === 'function') {
console.log('instance.dispose', instance.dispose)
instance.dispose()
}
id = el.dataset[this.instanceKey]
delete this.cache[id]
delete el.dataset[this.instanceKey]
}
else { console.log(el, el.dataset) }
};
Bindable.prototype.dispose = function(context) {
var instance, bindable;
var bindables = this.bindables(context)
for (var i = 0, len = bindables.length; i < len; i += 1) {
this.removeInstance(bindables[i])
}
bindables = []
return this
};
Bindable.prototype.bind = function(el, dataKey) {
var _class, key, id;
dataKey = dataKey || this.dataKey
key = el.getAttribute(dataKey)
if (_class = this.constructor.getClass(key)) {
if (!el.dataset[this.instanceKey]) {
id = ++this.uuid
el.dataset[this.instanceKey] = id
this.cache[id] = new _class(el)
}
return this.getInstanceFromEl(el)
} else {
if (typeof console !== "undefined" && console !== null) {
console.error('Bindable for key: ' + key + ' not found in Bindable.registry for instance ' + el)
}
return void 0
}
};
Bindable.getClass = function(key) {
var _key = "" + key
return (this.registry[_key] ? this.registry[_key]['class'] : void 0)
};
Bindable.register = function(key, klass) {
var _key = "" + key
this.registry = this.registry || {}
this.registry[_key] = {'class': klass}
return this.registry
};
return Bindable
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.