Merge pull request #1164 from yavorsky/master

Update exoskeleton to 0.7.0

examples/exoskeleton/.gitignore

@@ -4,6 +4,9 @@ node_modules/exoskeleton/*
 node_modules/backbone.localstorage/*
 !node_modules/backbone.localstorage/backbone.localStorage.js
 
+node_modules/backbone.nativeview/*
+!node_modules/backbone.nativeview/backbone.nativeview.js
+
 node_modules/todomvc-app-css/*
 !node_modules/todomvc-app-css/index.css
 

examples/exoskeleton/index.html

@@ -53,6 +53,8 @@
 		<script src="node_modules/exoskeleton/exoskeleton.js"></script>
 		<script src="node_modules/microtemplates/index.js"></script>
 		<script src="node_modules/backbone.localstorage/backbone.localStorage.js"></script>
+		<script src="node_modules/backbone.nativeview/backbone.nativeview.js"></script>
+		<script>Backbone.View = Backbone.NativeView;</script>
 		<script src="js/models/todo.js"></script>
 		<script src="js/collections/todos.js"></script>
 		<script src="js/views/todo-view.js"></script>

examples/exoskeleton/js/views/app-view.js

@@ -8,6 +8,12 @@ var app = app || {};
 		el.style.display = toggle ? '' : 'none';
 	};
 
+	var matchesSelector = function (node, selector) {
+		return [].some.call(document.querySelectorAll(selector), function (el) {
+			return el === node;
+		});
+	};
+
 	// The Application
 	// ---------------
 
@@ -32,10 +38,10 @@ var app = app || {};
 		// collection, when items are added or changed. Kick things off by
 		// loading any preexisting todos that might be saved in *localStorage*.
 		initialize: function () {
-			this.allCheckbox = this.find('#toggle-all');
-			this.input = this.find('#new-todo');
-			this.footer = this.find('#footer');
-			this.main = this.find('#main');
+			this.allCheckbox = this.$('#toggle-all').item(0);
+			this.input = this.$('#new-todo').item(0);
+			this.footer = this.$('#footer').item(0);
+			this.main = this.$('#main').item(0);
 
 			this.listenTo(app.todos, 'add', this.addOne);
 			this.listenTo(app.todos, 'reset', this.addAll);
@@ -66,9 +72,9 @@ var app = app || {};
 					remaining: remaining
 				});
 
-				this.findAll('#filters li a').forEach(function (el) {
+				[].forEach.call(this.$('#filters li a'), function (el) {
 					el.classList.remove('selected');
-					if (Backbone.utils.matchesSelector(el, selector)) {
+					if (matchesSelector(el, selector)) {
 						el.classList.add('selected');
 					}
 				});
@@ -90,7 +96,7 @@ var app = app || {};
 
 		// Add all items in the **Todos** collection at once.
 		addAll: function () {
-			this.find('#todo-list').innerHTML = '';
+			this.$('#todo-list').item(0).innerHTML = '';
 			app.todos.forEach(this.addOne, this);
 		},
 

examples/exoskeleton/js/views/todo-view.js

@@ -41,7 +41,7 @@ var app = app || {};
 			var method = this.model.get('completed') ? 'add' : 'remove';
 			this.el.classList[method]('completed');
 			this.toggleVisible();
-			this.input = this.find('.edit');
+			this.input = this.$('.edit').item(0);
 			return this;
 		},
 

examples/exoskeleton/node_modules/backbone.nativeview/backbone.nativeview.js

+// Backbone.NativeView.js 0.3.2
+// ---------------
+
+//     (c) 2014 Adam Krebs, Jimmy Yuen Ho Wong
+//     Backbone.NativeView may be freely distributed under the MIT license.
+//     For all details and documentation:
+//     https://github.com/akre54/Backbone.NativeView
+
+(function (factory) {
+  if (typeof define === 'function' && define.amd) { define(['backbone'], factory);
+  } else if (typeof exports === 'object') { factory(require('backbone'));
+  } else { factory(Backbone); }
+}(function (Backbone) {
+  // Cached regex to match an opening '<' of an HTML tag, possibly left-padded
+  // with whitespace.
+  var paddedLt = /^\s*</;
+
+  // Caches a local reference to `Element.prototype` for faster access.
+  var ElementProto = (typeof Element !== 'undefined' && Element.prototype) || {};
+
+  // Cross-browser event listener shims
+  var elementAddEventListener = ElementProto.addEventListener || function(eventName, listener) {
+    return this.attachEvent('on' + eventName, listener);
+  }
+  var elementRemoveEventListener = ElementProto.removeEventListener || function(eventName, listener) {
+    return this.detachEvent('on' + eventName, listener);
+  }
+
+  var indexOf = function(array, item) {
+    for (var i = 0, len = array.length; i < len; i++) if (array[i] === item) return i;
+    return -1;
+  }
+
+  // Find the right `Element#matches` for IE>=9 and modern browsers.
+  var matchesSelector = ElementProto.matches ||
+      ElementProto.webkitMatchesSelector ||
+      ElementProto.mozMatchesSelector ||
+      ElementProto.msMatchesSelector ||
+      ElementProto.oMatchesSelector ||
+      // Make our own `Element#matches` for IE8
+      function(selector) {
+        // Use querySelectorAll to find all elements matching the selector,
+        // then check if the given element is included in that list.
+        // Executing the query on the parentNode reduces the resulting nodeList,
+        // (document doesn't have a parentNode).
+        var nodeList = (this.parentNode || document).querySelectorAll(selector) || [];
+        return !!~indexOf(nodeList, this);
+      };
+
+  // Cache Backbone.View for later access in constructor
+  var BBView = Backbone.View;
+
+  // To extend an existing view to use native methods, extend the View prototype
+  // with the mixin: _.extend(MyView.prototype, Backbone.NativeViewMixin);
+  Backbone.NativeViewMixin = {
+
+    _domEvents: null,
+
+    constructor: function() {
+      this._domEvents = [];
+      return BBView.apply(this, arguments);
+    },
+
+    $: function(selector) {
+      return this.el.querySelectorAll(selector);
+    },
+
+    _removeElement: function() {
+      this.undelegateEvents();
+      if (this.el.parentNode) this.el.parentNode.removeChild(this.el);
+    },
+
+    // Apply the `element` to the view. `element` can be a CSS selector,
+    // a string of HTML, or an Element node.
+    _setElement: function(element) {
+      if (typeof element == 'string') {
+        if (paddedLt.test(element)) {
+          var el = document.createElement('div');
+          el.innerHTML = element;
+          this.el = el.firstChild;
+        } else {
+          this.el = document.querySelector(element);
+        }
+      } else {
+        this.el = element;
+      }
+    },
+
+    // Set a hash of attributes to the view's `el`. We use the "prop" version
+    // if available, falling back to `setAttribute` for the catch-all.
+    _setAttributes: function(attrs) {
+      for (var attr in attrs) {
+        attr in this.el ? this.el[attr] = attrs[attr] : this.el.setAttribute(attr, attrs[attr]);
+      }
+    },
+
+    // Make a event delegation handler for the given `eventName` and `selector`
+    // and attach it to `this.el`.
+    // If selector is empty, the listener will be bound to `this.el`. If not, a
+    // new handler that will recursively traverse up the event target's DOM
+    // hierarchy looking for a node that matches the selector. If one is found,
+    // the event's `delegateTarget` property is set to it and the return the
+    // result of calling bound `listener` with the parameters given to the
+    // handler.
+    delegate: function(eventName, selector, listener) {
+      if (typeof selector === 'function') {
+        listener = selector;
+        selector = null;
+      }
+
+      var root = this.el;
+      var handler = selector ? function (e) {
+        var node = e.target || e.srcElement;
+        for (; node && node != root; node = node.parentNode) {
+          if (matchesSelector.call(node, selector)) {
+            e.delegateTarget = node;
+            listener(e);
+          }
+        }
+      } : listener;
+
+      elementAddEventListener.call(this.el, eventName, handler, false);
+      this._domEvents.push({eventName: eventName, handler: handler, listener: listener, selector: selector});
+      return handler;
+    },
+
+    // Remove a single delegated event. Either `eventName` or `selector` must
+    // be included, `selector` and `listener` are optional.
+    undelegate: function(eventName, selector, listener) {
+      if (typeof selector === 'function') {
+        listener = selector;
+        selector = null;
+      }
+
+      if (this.el) {
+        var handlers = this._domEvents.slice();
+        for (var i = 0, len = handlers.length; i < len; i++) {
+          var item = handlers[i];
+
+          var match = item.eventName === eventName &&
+              (listener ? item.listener === listener : true) &&
+              (selector ? item.selector === selector : true);
+
+          if (!match) continue;
+
+          elementRemoveEventListener.call(this.el, item.eventName, item.handler, false);
+          this._domEvents.splice(indexOf(handlers, item), 1);
+        }
+      }
+      return this;
+    },
+
+    // Remove all events created with `delegate` from `el`
+    undelegateEvents: function() {
+      if (this.el) {
+        for (var i = 0, len = this._domEvents.length; i < len; i++) {
+          var item = this._domEvents[i];
+          elementRemoveEventListener.call(this.el, item.eventName, item.handler, false);
+        };
+        this._domEvents.length = 0;
+      }
+      return this;
+    }
+  };
+
+  Backbone.NativeView = Backbone.View.extend(Backbone.NativeViewMixin);
+
+  return Backbone.NativeView;
+}));

examples/exoskeleton/package.json

 {
   "private": true,
   "dependencies": {
-    "exoskeleton": "^0.3.0",
+    "exoskeleton": "^0.7.0",
     "backbone.localstorage": "^1.1.16",
+    "backbone.nativeview": "^0.3.2",
     "todomvc-app-css": "^1.0.0",
     "todomvc-common": "^1.0.1",
     "microtemplates": "^0.1.0"