view fixes

Author: akre54

src/chaplin/views/collection_view.coffee

@@ -5,89 +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
     node
 
-toggleElement = do ->
-  if $
-    (elem, visible) -> $(elem).toggle visible
+toggleElement = (elem, visible) ->
+  if Backbone.$
+    $(elem).toggle visible
   else
-    (elem, visible) ->
-      elem.style.display = (if visible then '' else 'none')
+    elem.style.display = (if visible then '' else 'none')
 
 startAnimation = (elem, useCssAnimation, cls) ->
   if useCssAnimation
     elem.classList.add 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.opacity = 1
-
-insertView = do ->
-  if $
-    (list, viewEl, position, length, itemSelector) ->
-      $list = $ list
-      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.$
+    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
@@ -163,7 +131,7 @@ 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 $
+    view.$el.stop(true, true) if Backbone.$
     toggleElement view.el, included
 
   # View lists

src/chaplin/views/layout.coffee

@@ -7,9 +7,6 @@ utils = require 'chaplin/lib/utils'
 EventBroker = require 'chaplin/lib/event_broker'
 View = require 'chaplin/views/view'
 
-# Shortcut to access the DOM manipulation library.
-$ = Backbone.$
-
 module.exports = class Layout extends View
   # Bind to document body by default.
   el: 'body'
@@ -100,7 +97,7 @@ module.exports = class Layout extends View
   openLink: (event) =>
     return if utils.modifierKeyPressed(event)
 
-    el = if $ then event.currentTarget else event.delegateTarget
+    el = if Backbone.$ then event.currentTarget else event.delegateTarget
     isAnchor = el.nodeName is 'A'
 
     # Get the href and perform checks on it.
@@ -118,7 +115,7 @@ module.exports = class Layout extends View
     skipRouting = @settings.skipRouting
     type = typeof skipRouting
     return if type is 'function' and not skipRouting(href, el) or
-      type is 'string' and (if $ then $(el).is(skipRouting) else Backbone.utils.matchesSelector el, skipRouting)
+      type is 'string' and (if Backbone.$ then Backbone.$(el).is(skipRouting) else el.matches skipRouting)
 
     # Handle external links.
     external = isAnchor and @isExternalLink el
@@ -206,14 +203,14 @@ module.exports = class Layout extends View
 
     # Apply the region selector.
     instance.container = if region.selector is ''
-      if $
+      if Backbone.$
         region.instance.$el
       else
         region.instance.el
     else
       if region.instance.noWrap
-        if $
-          $(region.instance.container).find region.selector
+        if Backbone.$
+          Backbone.$(region.instance.container).find region.selector
         else
           region.instance.container.querySelector region.selector
       else

src/chaplin/views/view.coffee

@@ -6,42 +6,6 @@ mediator = require 'chaplin/mediator'
 EventBroker = require 'chaplin/lib/event_broker'
 utils = require 'chaplin/lib/utils'
 
-# Shortcut to access the DOM manipulation library.
-$ = Backbone.$
-
-# Function bind shortcut.
-bind = do ->
-  if Function::bind
-    (item, ctx) -> item.bind ctx
-  else if _.bind
-    _.bind
-
-setHTML = do ->
-  if $
-    (elem, html) -> $(elem).html html
-  else
-    (elem, html) -> elem.innerHTML = html
-
-attach = do ->
-  if $
-    (view) ->
-      actual = $(view.container)
-      if typeof view.containerMethod is 'function'
-        view.containerMethod actual, view.el
-      else
-        actual[view.containerMethod] view.el
-  else
-    (view) ->
-      actual = if typeof view.container is 'string'
-        document.querySelector view.container
-      else
-        view.container
-
-      if typeof view.containerMethod is 'function'
-        view.containerMethod actual, view.el
-      else
-        actual[view.containerMethod] view.el
-
 module.exports = class View extends Backbone.View
   # Mixin an EventBroker.
   _.extend @prototype, EventBroker
@@ -69,7 +33,7 @@ module.exports = class View extends Backbone.View
 
   # Method which is used for adding the view to the DOM
   # Like jQuery’s `html`, `prepend`, `append`, `after`, `before` etc.
-  containerMethod: if $ then 'append' else 'appendChild'
+  containerMethod: if Backbone.$ then 'append' else 'appendChild'
 
   # Regions
   # -------
@@ -152,7 +116,7 @@ module.exports = class View extends Backbone.View
           @el =
             if region.instance.container?
               if region.instance.region?
-                $(region.instance.container).find region.selector
+                Backbone.$(region.instance.container).find region.selector
               else
                 region.instance.container
             else
@@ -193,7 +157,7 @@ module.exports = class View extends Backbone.View
       match = key.match /^(\S+)\s*(.*)$/
       eventName = "#{match[1]}.delegateEvents#{@cid}"
       selector = match[2]
-      bound = bind handler, this
+      bound = _.bind handler, this
       @delegate eventName, (selector or null), bound
     return
 
@@ -367,20 +331,42 @@ module.exports = class View extends Backbone.View
         # Delegate events to the top-level container in the template.
         @setElement el.firstChild, true
       else
-        setHTML @el, html
+        @setHTML html
 
     # Return the view.
     this
 
+  # Set the innerHTML of the view's `el`. Override this method to support
+  # older browsers (IE needs the html empty before, e.g.)
+  setHTML: (html) ->
+    @el.innerHTML = html
+
   # This method is called after a specific `render` of a derived class.
   attach: ->
     # Attempt to bind this view to its named region.
     mediator.execute 'region:show', @region, this if @region?
 
     # Automatically append to DOM if the container element is set.
     if @container and not document.body.contains @el
-      attach this
-      # Trigger an event.
+      if Backbone.$
+        actual = Backbone.$(this.container)
+        if typeof this.containerMethod is 'function'
+          this.containerMethod actual, this.el
+        else
+          actual[this.containerMethod] this.el
+      else
+        actual = if typeof this.container is 'string'
+          document.querySelector this.container
+        else
+          this.container
+
+        if typeof this.containerMethod is 'function'
+          this.containerMethod actual, this.el
+        else
+          actual[this.containerMethod] this.el
+
+      # Hook into this event for things that require the view to be in the DOM
+      # (like calculating height / width or position).
       @trigger 'addedToDOM'
 
   # Disposal

test/initialize.js

@@ -9,19 +9,24 @@ window.clearInterval = timers.clearInterval;
 var paths = {};
 var componentsFolder = 'bower_components';
 
-var match = window.location.search.match(/type=([-\w]+)/);
+var match = window.location.search.match(/type=([-\w]+)&useDeps=([-\w]+)/);
 var testType = window.testType || (match ? match[1] : 'backbone');
+var useDeps = window.useDeps || (match ? match[2] : true);
 
 var addDeps = function() {
-  paths.underscore = '../' + componentsFolder + '/lodash/lodash.compat';
-  paths.jquery = '../' + componentsFolder + '/jquery/jquery';
+  if (useDeps) {
+    paths.underscore = '../' + componentsFolder + '/lodash/lodash.compat';
+    paths.jquery = '../' + componentsFolder + '/jquery/jquery';
+  } else {
+    paths.NativeView = '../' + componentsFolder + '/Backbone.NativeView/backbone.nativeview';
+  }
 };
 if (testType === 'backbone') {
-  paths.backbone = '../' + componentsFolder + '/backbone/backbone'
-  addDeps()
+  paths.backbone = '../' + componentsFolder + '/backbone/backbone';
+  addDeps();
 } else {
-  if (testType === 'deps') addDeps();
-  paths.backbone = '../' + componentsFolder + '/exoskeleton/exoskeleton'
+  addDeps();
+  paths.backbone = '../' + componentsFolder + '/exoskeleton/exoskeleton';
 }
 
 var config = {
@@ -46,7 +51,11 @@ if (testType === 'backbone' || testType === 'deps') {
 requirejs.config(config);
 if (testType === 'exos') {
   define('jquery', function(){});
-  define('underscore', ['backbone'], function(Backbone){return Backbone.utils;});
+  define('underscore', ['backbone'], function(Backbone){
+    var _ = Backbone.utils;
+    _.bind = function(fn, ctx) { return fn.bind(ctx); }
+    return _;
+  });
 }
 mocha.setup({ui: 'bdd', ignoreLeaks: true});
 // Wonderful hack to send a message to grunt from inside a mocha test.
@@ -86,16 +95,26 @@ window.addEventListener('DOMContentLoaded', function() {
     'view',
     'utils',
     'sync_machine'
-  ];
-  var loaded = [];
-  for (var i = 0, l = specs.length; i < l; i++) {
-    loaded.push(specs[i] + '_spec');
-  }
-  require(loaded, function() {
+  ].map(function(file) {
+    return file + '_spec';
+  });
+
+  var run = function() {
     if (window.mochaPhantomJS) {
       mochaPhantomJS.run();
     } else {
       mocha.run();
     }
+  };
+
+  require(specs, function() {
+    if (useDeps) {
+      run();
+    } else {
+      require(['backbone', 'NativeView'], function(Backbone, NativeView) {
+        Backbone.View = NativeView;
+        run();
+      });
+    }
   });
 }, false);