Bb view hooks

bower.json

@@ -6,12 +6,13 @@
     "expect": "0.2.x",
     "jquery": "1.9.x",
     "lodash": "2.3.x",
-    "backbone": "1.1.x",
+    "backbone": "git://github.com/jashkenas/backbone#3994c1cb8592c7e30613e9f869fe60c1cdce6164",
     "benchmark": "git://github.com/bestiejs/benchmark.js.git",
     "sinon": "http://sinonjs.org/releases/sinon-1.7.1.js",
     "requirejs": "~2.1.8",
     "davy": "~0.0.4",
-    "exoskeleton": "~0.6.0"
+    "backbone.nativeview": "0.3.1",
+    "exoskeleton": "~0.7.0"
   },
   "exportsOverride": {
     "mocha": {

package.json

@@ -16,7 +16,7 @@
     "grunt-istanbul": "0.2.x",
     "grunt-urequire": "git://github.com/concordusapps/grunt-urequire",
     "grunt-coffeelint": "0.0.x",
-    "grunt-mocha": "0.2.x",
+    "grunt-mocha": "0.4.11",
     "grunt-transbrute": "~0.2.0",
     "prompt": "0.2.x",
     "phantomjs": "1.9.x"

src/chaplin/lib/utils.coffee

@@ -2,11 +2,30 @@
 
 _ = require 'underscore'
 support = require 'chaplin/lib/support'
+ElementProto = if typeof Element != 'undefined' then Element.prototype else {}
+
 
 # Utilities
 # ---------
 
 utils =
+  # DOM Helpers
+  # --------------
+
+  matchesSelector: ElementProto.matches ||
+    ElementProto.webkitMatchesSelector ||
+    ElementProto.mozMatchesSelector ||
+    ElementProto.msMatchesSelector ||
+    ElementProto.oMatchesSelector ||
+    #Make our own `Element#matches` for IE8
+    (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).
+      nodeList = (@parentNode || document).querySelectorAll(selector) || []
+      !!~indexOf(nodeList, this)
+
   # Object Helpers
   # --------------
 

src/chaplin/views/collection_view.coffee

@@ -5,102 +5,57 @@ Backbone = require 'backbone'
 View = require 'chaplin/views/view'
 utils = require 'chaplin/lib/utils'
 
-# Shortcut to access the DOM manipulation library.
-$ = Backbone.$
-
 filterChildren = (nodeList, selector) ->
   return nodeList unless selector
-  for node in nodeList when Backbone.utils.matchesSelector node, selector
+  for node in nodeList when utils.matchesSelector.call node, selector
     node
 
-toggleElement = do ->
-  if $
-    (elem, visible) -> elem.toggle visible
+toggleElement = (elem, visible) ->
+  if Backbone.$
+    Backbone.$(elem).toggle visible
   else
-    (elem, visible) ->
-      elem.style.display = (if visible then '' else 'none')
+    elem.style.display = (if visible then '' else 'none')
 
-addClass = do ->
-  if $
-    (elem, cls) -> elem.addClass cls
+startAnimation = (elem, useCssAnimation, cls) ->
+  if useCssAnimation
+    elem.classList.add cls
   else
-    (elem, cls) -> elem.classList.add cls
+    elem.style.opacity = 0
 
-startAnimation = do ->
-  if $
-    (elem, useCssAnimation, cls) ->
-      if useCssAnimation
-        addClass elem, cls
-      else
-        elem.css 'opacity', 0
-  else
-    (elem, useCssAnimation, cls) ->
-      if useCssAnimation
-        addClass elem, cls
-      else
-        elem.style.opacity = 0
-
-endAnimation = do ->
-  if $
-    (elem, duration) -> elem.animate {opacity: 1}, duration
-  else
-    (elem, duration) ->
-      elem.style.transition = "opacity #{(duration / 1000)}s"
-      elem.style.opacity = 1
-
-insertView = do ->
-  if $
-    (list, viewEl, position, length, itemSelector) ->
-      insertInMiddle = (0 < position < length)
-      isEnd = (length) -> length is 0 or position is length
-
-      if insertInMiddle or itemSelector
-        # Get the children which originate from item views.
-        children = list.children itemSelector
-        childrenLength = children.length
-
-        # Check if it needs to be inserted.
-        unless children[position] is viewEl
-          if isEnd childrenLength
-            # Insert at the end.
-            list.append viewEl
-          else
-            # Insert at the right position.
-            if position is 0
-              children.eq(position).before viewEl
-            else
-              children.eq(position - 1).after viewEl
-      else
-        method = if isEnd length then 'append' else 'prepend'
-        list[method] viewEl
+endAnimation = (elem, duration) ->
+  if Backbone.$
+    Backbone.$(elem).animate {opacity: 1}, duration
   else
-    (list, viewEl, position, length, itemSelector) ->
-      insertInMiddle = (0 < position < length)
-      isEnd = (length) -> length is 0 or position is length
-
-      if insertInMiddle or itemSelector
-        # Get the children which originate from item views.
-        children = filterChildren list.children, itemSelector
-        childrenLength = children.length
-
-        # Check if it needs to be inserted.
-        unless children[position] is viewEl
-          if isEnd childrenLength
-            # Insert at the end.
-            list.appendChild viewEl
-          else if position is 0
-            # Insert at the right position.
-            list.insertBefore viewEl, children[position]
-          else
-            last = children[position - 1]
-            if list.lastChild is last
-              list.appendChild viewEl
-            else
-              list.insertBefore viewEl, last.nextElementSibling
-      else if isEnd length
+    elem.style.transition = "opacity #{(duration / 1000)}s"
+    elem.opacity = 1
+
+insertView = (list, viewEl, position, length, itemSelector) ->
+  insertInMiddle = (0 < position < length)
+  isEnd = (length) -> length is 0 or position is length
+
+  if insertInMiddle or itemSelector
+    # Get the children which originate from item views.
+    children = filterChildren list.children, itemSelector
+    childrenLength = children.length
+
+    # Check if it needs to be inserted.
+    unless children[position] is viewEl
+      if isEnd childrenLength
+        # Insert at the end.
         list.appendChild viewEl
+      else if position is 0
+        # Insert at the right position.
+        list.insertBefore viewEl, children[position]
       else
-        list.insertBefore viewEl, list.firstChild
+        last = children[position - 1]
+        if list.lastChild is last
+          list.appendChild viewEl
+        else
+          list.insertBefore viewEl, last.nextElementSibling
+  else if isEnd length
+    list.appendChild viewEl
+  else
+    list.insertBefore viewEl, list.firstChild
 
 # General class for rendering Collections.
 # Derive this class and declare at least `itemView` or override
@@ -149,6 +104,7 @@ module.exports = class CollectionView extends View
 
   # The actual element which is fetched using `listSelector`
   $list: null
+  listEl: null
 
   # Selector for a fallback element which is shown if the collection is empty.
   fallbackSelector: null
@@ -164,7 +120,7 @@ module.exports = class CollectionView extends View
   $loading: null
 
   # Selector which identifies child elements belonging to collection
-  # If empty, all children of $list are considered.
+  # If empty, all children of listEl are considered.
   itemSelector: null
 
   # Filtering
@@ -176,8 +132,8 @@ module.exports = class CollectionView extends View
   # A function that will be executed after each filter.
   # Hides excluded items by default.
   filterCallback: (view, included) ->
-    view.$el.stop(true, true) if $
-    toggleElement (if $ then view.$el else view.el), included
+    view.$el.stop(true, true) if Backbone.$
+    toggleElement view.el, included
 
   # View lists
   # ----------
@@ -235,13 +191,11 @@ module.exports = class CollectionView extends View
   render: ->
     super
 
-    # Set the $list property with the actual list container.
+    # Set the listEl property with the actual list container.
     listSelector = _.result this, 'listSelector'
 
-    if $
-      @$list = if listSelector then @$(listSelector) else @$el
-    else
-      @list = if listSelector then @find(@listSelector) else @el
+    @listEl = if listSelector then @$(listSelector)[0] else @el
+    @$list = Backbone.$ @listEl if Backbone.$
 
     @initFallback()
     @initLoadingIndicator()
@@ -271,10 +225,7 @@ module.exports = class CollectionView extends View
     return unless @fallbackSelector
 
     # Set the $fallback property.
-    if $
-      @$fallback = @$ @fallbackSelector
-    else
-      @fallback = @find @fallbackSelector
+    @$fallback = @$ @fallbackSelector
 
     # Listen for visible items changes.
     @on 'visibilityChange', @toggleFallback
@@ -295,7 +246,7 @@ module.exports = class CollectionView extends View
         # Assume it is synced.
         true
     )
-    toggleElement (if $ then @$fallback else @fallback), visible
+    toggleElement @$fallback[0], visible
 
   # Loading indicator
   # -----------------
@@ -307,10 +258,7 @@ module.exports = class CollectionView extends View
       typeof @collection.isSyncing is 'function'
 
     # Set the $loading property.
-    if $
-      @$loading = @$ @loadingSelector
-    else
-      @loading = @find @loadingSelector
+    @$loading = @$ @loadingSelector
 
     # Listen for sync events on the collection.
     @listenTo @collection, 'syncStateChange', @toggleLoadingIndicator
@@ -325,7 +273,7 @@ module.exports = class CollectionView extends View
     # show up in this case, you need to overwrite this method to
     # disable the check.
     visible = @collection.length is 0 and @collection.isSyncing()
-    toggleElement (if $ then @$loading else @loading), visible
+    toggleElement (@$loading[0]), visible
 
   # Filtering
   # ---------
@@ -459,22 +407,17 @@ module.exports = class CollectionView extends View
     else
       true
 
-    # Get the view’s top element.
-    elem = if $ then view.$el else view.el
-
     # Start animation.
     if included and enableAnimation
-      startAnimation elem, @useCssAnimation, @animationStartClass
+      startAnimation view.el, @useCssAnimation, @animationStartClass
 
     # Hide or mark the view if it’s filtered.
     @filterCallback view, included if @filterer
 
     length = @collection.length
 
     # Insert the view into the list.
-    list = if $ then @$list else @list
-
-    insertView list, elem, position, length, @itemSelector
+    insertView @listEl, view.el, position, length, @itemSelector
 
     # Tell the view that it was added to its parent.
     view.trigger 'addedToParent'
@@ -486,10 +429,10 @@ module.exports = class CollectionView extends View
     if included and enableAnimation
       if @useCssAnimation
         # Wait for DOM state change.
-        setTimeout (=> addClass elem, @animationEndClass), 0
+        setTimeout (=> view.el.classList.add @animationEndClass), 0
       else
         # Fade the view in if it was made transparent before.
-        endAnimation elem, @animationDuration
+        endAnimation view.el, @animationDuration
 
     view
 
@@ -532,7 +475,7 @@ module.exports = class CollectionView extends View
     return if @disposed
 
     # Remove jQuery objects, item view cache and visible items list.
-    properties = ['$list', '$fallback', '$loading', 'visibleItems']
+    properties = ['$list', 'listEl', '$fallback', '$loading', 'visibleItems']
     delete this[prop] for prop in properties
 
     # Self-disposal.