First stab at converting bindable without jQuery.

Lots of potential issues here, but getting the ball rolling. See #2 for the conversation
modeset · May 9, 2013 · 1c6f9d6 · 1c6f9d6
1 parent 9e1a2bd
commit 1c6f9d6
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 0 deletions.
diff --git a/bindable_modern.js b/bindable_modern.js
@@ -0,0 +1,74 @@
+window.Bindable = (function() {
+
+  function Bindable(context, dataKey) {
+    context = context || 'body'
+    this.dataKey = dataKey || 'data-bindable'
+    this.instanceKey = this.dataKey.replace(/data-/g, '') + 'Instance'
+    this.bindables = document[context].querySelectorAll('[' + this.dataKey + ']')
+  }
+
+
+  Bindable.prototype.bindAll = function() {
+    for (var i = 0, len = this.bindables.length; i < len; i += 1) {
+      this.bind(this.bindables[i])
+    }
+    return this
+  };
+
+
+  Bindable.prototype.getRefs = function() {
+    var refs = []
+    for (var i = 0, len = this.bindables.length; i < len; i += 1) {
+      refs.push(this.bindables[i][this.instanceKey])
+    }
+    return refs
+  };
+
+
+  Bindable.prototype.dispose = function() {
+    var instance
+    for (var i = 0, len = this.bindables.length; i < len; i += 1) {
+      var bindable = this.bindables[i]
+      if (instance = bindable[this.instanceKey]) {
+        if (typeof (instance != null ? instance.dispose : void 0) === 'function') {
+          instance.dispose()
+        }
+        bindable[this.instanceKey] = null
+      }
+    }
+    this.bindables = []
+    return this
+  };
+
+
+  Bindable.prototype.bind = function(el, dataKey) {
+    dataKey = dataKey || this.dataKey
+    var _class
+    var key = el.getAttribute(dataKey)
+    if (_class = this.constructor.getClass(key)) {
+      if (!el[this.instanceKey]) {
+        el[this.instanceKey] = new _class(el)
+      }
+    } else  {
+      throw new Error('Bindable for key: ' + key + ' not found in Bindable.registry for instance ' + el)
+    }
+  };
+
+
+  Bindable.getClass = function(key) {
+    key = '"' + key + '"'
+    return (this.registry[key] ? this.registry[key]['class'] : void 0)
+  };
+
+
+  Bindable.register = function(key, klass) {
+    this.registry = this.registry || {}
+    this.registry['"' + key + '"'] = {'class': klass}
+    return this.registry
+  };
+
+
+  return Bindable
+
+})();
+
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset='utf-8'>
+    <title>Bindable Test</title>
+    <meta content='Mode Set' name='author'>
+    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
+    <meta content='no' name='imagetoolbar'>
+    <meta content='yes' name='apple-touch-fullscreen'>
+    <meta content='yes' name='apple-mobile-web-app-capable'>
+    <meta content='black' name='apple-mobile-web-app-status-bar-style'>
+  </head>
+
+  <body role="document">
+
+    <section id="content" class="container" role="main">
+      <code class="refs"></code>
+      <hr>
+      <div class="box" data-bindable="simple-binder"></div>
+    </section>
+
+    <script type="text/javascript" src="bindable_modern.js"></script>
+    <script type="text/javascript" src="test.js"></script>
+  </body>
+</html>
+
diff --git a/test.js b/test.js
@@ -0,0 +1,34 @@
+window.SimpleBinder = (function() {
+  function SimpleBinder(el) {
+    this.el = el
+    console.log(this.el)
+    this.el.innerHTML = "<code>Simple Binder Constructor</code>"
+  }
+
+  SimpleBinder.prototype.dispose = function() {
+    this.el.innerHTML += "<br/><code>Simple Binder Disposed</code>"
+  }
+
+  SimpleBinder.prototype.likeAString = function() {
+    return "SimpleBinder\n"
+  };
+
+  return SimpleBinder;
+
+})();
+
+Bindable.register('simple-binder', window.SimpleBinder);
+
+
+(function() {
+  var bindable = new Bindable().bindAll();
+  var refs = bindable.getRefs()
+  var code = document.querySelector('.refs')
+
+  for (var i = 0, len = refs.length; i < len; i += 1) {
+    code.innerHTML += "Ref " + i + ": " + refs[i].likeAString()
+  }
+  console.log(refs)
+  bindable.dispose()
+}())
+