sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/frameworks/desktop/views/date_field.js

@@ -158,7 +158,7 @@ SC.DateFieldView = SC.TextFieldView.extend(
     // Parse the string format to retrieve and build
     // a TextSelection array ordered to support tabs behaviour
     if (SC.empty(ft)) {
-      throw 'The format string is empty, and must be a valid string.';
+      throw new Error('The format string is empty, and must be a valid string.');
     }
 
     var pPos, key, keyPos, startAt = 0, nPos = 0, oPos = 0;
@@ -169,7 +169,7 @@ SC.DateFieldView = SC.TextFieldView.extend(
 
       keyPos = _dt.indexOf(key);
       if (keyPos === -1) {
-        throw "SC.DateFieldView: The format's key '%@' is not supported.".fmt(key);
+        throw new Error("SC.DateFieldView: The format's key '%@' is not supported.".fmt(key));
       }
       nPos = nPos + pPos - oPos;
       arr.push(SC.Object.create({

data/lib/frameworks/sproutcore/frameworks/desktop/views/grid.js

@@ -4,7 +4,7 @@
 //            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
-sc_require('views/list') ;
+sc_require('views/list');
 
 
 /** @class
@@ -37,7 +37,7 @@ SC.GridView = SC.ListView.extend(
     @default { left:0, right:0, top:0, bottom:0 }
     @see SC.View#layout
   */
-  layout: { left:0, right:0, top:0, bottom:0 },
+  layout: { left: 0, right: 0, top: 0, bottom: 0 },
 
   /**
     The common row height for grid items.
@@ -81,34 +81,35 @@ SC.GridView = SC.ListView.extend(
   insertionOrientation: SC.HORIZONTAL_ORIENTATION,
 
   /** @private */
-  itemsPerRow: function() {
-    var f = this.get('frame'),
-        columnWidth = this.get('columnWidth') || 0 ;
+  itemsPerRow: function () {
+    var frameWidth = this.get('frame').width,
+      columnWidth = this.get('columnWidth') || 0;
 
-    return (columnWidth <= 0) ? 1 : Math.floor(f.width / columnWidth) ;
-  }.property('frame', 'columnWidth').cacheable(),
+    return (columnWidth < 1) ? 1 : Math.floor(frameWidth / columnWidth);
+  }.property('columnWidth', '_frameWidth').cacheable(),
 
   /** @private
     Find the contentIndexes to display in the passed rect. Note that we
     ignore the width of the rect passed since we need to have a single
     contiguous range.
   */
-  contentIndexesInRect: function(rect) {
-    var rowHeight = this.get('rowHeight') || 48 ,
+  contentIndexesInRect: function (rect) {
+    var rowHeight = this.get('rowHeight') || 48,
         itemsPerRow = this.get('itemsPerRow'),
         min = Math.floor(SC.minY(rect) / rowHeight) * itemsPerRow,
-        max = Math.ceil(SC.maxY(rect) / rowHeight) * itemsPerRow ;
-    return SC.IndexSet.create(min, max-min);
+        max = Math.ceil(SC.maxY(rect) / rowHeight) * itemsPerRow;
+    return SC.IndexSet.create(min, max - min);
   },
 
   /** @private */
-  layoutForContentIndex: function(contentIndex) {
+  layoutForContentIndex: function (contentIndex) {
     var rowHeight = this.get('rowHeight') || 48,
         frameWidth = this.get('frame').width,
         itemsPerRow = this.get('itemsPerRow'),
-        columnWidth = Math.floor(frameWidth/itemsPerRow),
+        columnWidth = Math.floor(frameWidth / itemsPerRow),
         row = Math.floor(contentIndex / itemsPerRow),
-        col = contentIndex - (itemsPerRow*row) ;
+        col = contentIndex - (itemsPerRow * row);
+
     return {
       left: col * columnWidth,
       top: row * rowHeight,
@@ -121,20 +122,20 @@ SC.GridView = SC.ListView.extend(
     Overrides default CollectionView method to compute the minimum height
     of the list view.
   */
-  computeLayout: function() {
+  computeLayout: function () {
     var content = this.get('content'),
-        count = (content) ? content.get('length') : 0,
-        rowHeight = this.get('rowHeight') || 48,
-        itemsPerRow = this.get('itemsPerRow'),
-        rows = Math.ceil(count / itemsPerRow) ;
+      count = (content) ? content.get('length') : 0,
+      rowHeight = this.get('rowHeight') || 48,
+      itemsPerRow = this.get('itemsPerRow'),
+      rows = Math.ceil(count / itemsPerRow);
 
     // use this cached layout hash to avoid allocing memory...
-    var ret = this._cachedLayoutHash ;
+    var ret = this._cachedLayoutHash;
     if (!ret) ret = this._cachedLayoutHash = {};
 
     // set minHeight
-    ret.minHeight = rows * rowHeight ;
-    this.calculatedHeight = ret.minHeight;
+    ret.minHeight = rows * rowHeight;
+    this.set('calculatedHeight', ret.minHeight);
     return ret;
   },
 
@@ -144,13 +145,13 @@ SC.GridView = SC.ListView.extend(
   insertionPointClass: SC.View.extend({
     classNames: ['grid-insertion-point'],
 
-    render: function(context, firstTime) {
-      if (firstTime) context.push('<span class="anchor"></span>') ;
+    render: function (context, firstTime) {
+      if (firstTime) context.push('<span class="anchor"></span>');
     }
   }),
 
   /** @private */
-  showInsertionPoint: function(itemView, dropOperation) {
+  showInsertionPoint: function (itemView, dropOperation) {
     if (!itemView) return;
 
     // if drop on, then just add a class...
@@ -173,15 +174,15 @@ SC.GridView = SC.ListView.extend(
         // If there was an item that was the target of the drop previously, be
         // sure to clear it.
         this._lastDropOnView.set('isDropTarget', NO);
-        this._lastDropOnView = null ;
+        this._lastDropOnView = null;
       }
 
       if (!this._insertionPointView) {
-        this._insertionPointView = this.insertionPointClass.create() ;
+        this._insertionPointView = this.insertionPointClass.create();
       }
 
-      var insertionPoint = this._insertionPointView ;
-      var itemViewFrame = itemView.get('frame') ;
+      var insertionPoint = this._insertionPointView;
+      var itemViewFrame = itemView.get('frame');
       var f = { height: itemViewFrame.height - 6,
             x: itemViewFrame.x,
             y: itemViewFrame.y + 6,
@@ -189,18 +190,18 @@ SC.GridView = SC.ListView.extend(
           };
 
       if (!SC.rectsEqual(insertionPoint.get('frame'), f)) {
-        insertionPoint.set('frame', f) ;
+        insertionPoint.set('frame', f);
       }
 
       if (insertionPoint.parentNode !== itemView.parentNode) {
-        itemView.parentNode.appendChild(insertionPoint) ;
+        itemView.parentNode.appendChild(insertionPoint);
       }
     }
 
   },
 
   /** @see SC.CollectionView#hideInsertionPoint */
-  hideInsertionPoint: function() {
+  hideInsertionPoint: function () {
     // If there was an item that was the target of the drop previously, be
     // sure to clear it.
     if (this._lastDropOnView) {
@@ -208,38 +209,38 @@ SC.GridView = SC.ListView.extend(
       this._lastDropOnView = null;
     }
 
-    var view = this._insertionPointView ;
+    var view = this._insertionPointView;
     if (view) view.removeFromParent().destroy();
     this._insertionPointView = null;
   },
 
   /** @private */
-  insertionIndexForLocation: function(loc, dropOperation) {
+  insertionIndexForLocation: function (loc, dropOperation) {
     var f = this.get('frame'),
         sf = this.get('clippingFrame'),
         itemsPerRow = this.get('itemsPerRow'),
         columnWidth = Math.floor(f.width / itemsPerRow),
-        row = Math.floor((loc.y - f.y - sf.y) / this.get('rowHeight')) ;
+        row = Math.floor((loc.y - f.y - sf.y) / this.get('rowHeight'));
 
     var retOp = SC.DROP_BEFORE,
         offset = (loc.x - f.x - sf.x),
         col = Math.floor(offset / columnWidth),
-        percentage = (offset / columnWidth) - col ;
+        percentage = (offset / columnWidth) - col;
 
     // if the dropOperation is SC.DROP_ON and we are in the center 60%
     // then return the current item.
     if (dropOperation === SC.DROP_ON) {
-      if (percentage > 0.80) col++ ;
+      if (percentage > 0.80) col++;
       if ((percentage >= 0.20) && (percentage <= 0.80)) {
         retOp = SC.DROP_ON;
       }
     } else {
-      if (percentage > 0.45) col++ ;
+      if (percentage > 0.45) col++;
     }
 
     // convert to index
-    var ret= (row*itemsPerRow) + col ;
-    return [ret, retOp] ;
+    var ret = (row * itemsPerRow) + col;
+    return [ret, retOp];
   },
 
   /** @private
@@ -249,30 +250,42 @@ SC.GridView = SC.ListView.extend(
 
     Update all of their layouts if necessary.
   */
-  _gv_frameDidChange: function() {
+  _gv_frameDidChange: function () {
     var frame = this.get('frame'),
-      width;
-
-    // Changes to the width of the frame is the only variable that
-    // alters the layout of item views.
-    width = frame.width;
-    if (this._lastFrameWidth && width !== this._lastFrameWidth) {
-      this.notifyPropertyChange('itemsPerRow');
+      lastFrameWidth = this._lastFrameWidth,
+      width = frame.width;
 
-      var idx,
-        itemView,
+    // A change to the width of the frame is the only variable that
+    // alters the layout of item views and our computed layout.
+    if (lastFrameWidth && width !== lastFrameWidth) {
+      var itemView,
         nowShowing = this.get('nowShowing');
 
-      // Only loop through the now showing indexes, if the content is sparsely
-      // loaded we could inadvertently trigger reloading unneeded content.
-      nowShowing.forEach(function(idx) {
+      // Internal property used to indicate a possible itemsPerRow change.  This
+      // is better than having itemsPerRow dependent on frame which changes frequently.
+      this.set('_frameWidth', width);
+
+      // Only loop through the now showing indexes, if the content was sparsely
+      // loaded we would inadvertently load all the content.
+      nowShowing.forEach(function (idx) {
         itemView = this.itemViewForContentIndex(idx);
         itemView.adjust(this.layoutForContentIndex(idx));
       }, this);
     }
 
-    // Cache the last width in order to check for differences.
     this._lastFrameWidth = width;
-  }.observes('frame')
+  }.observes('frame'),
+
+  /** @private Recompute our layout if itemsPerRow actually changes. */
+  _gv_itemsPerRowDidChange: function () {
+    var itemsPerRow = this.get('itemsPerRow'),
+      lastItemsPerRow = this._lastItemsPerRow || 0;
+
+    if (itemsPerRow !== lastItemsPerRow) {
+      this.invokeOnce('adjustLayout');
+    }
+
+    this._lastItemsPerRow = itemsPerRow;
+  }.observes('itemsPerRow')
 
 });

data/lib/frameworks/sproutcore/frameworks/desktop/views/image_button.js

@@ -64,7 +64,7 @@ SC.ImageButtonView = SC.ButtonView.extend(
     @default 'imageButtonRenderDelegate'
   */
   renderDelegateName: 'imageButtonRenderDelegate',
-  
+
   /**
     @type Array
     @default ['image']
@@ -73,10 +73,10 @@ SC.ImageButtonView = SC.ButtonView.extend(
 
   /**
     A class name that will be applied to the img tag of the button.
-    
+
     @type String
     @default null
   */
   image: null
 
-}) ;
+});

data/lib/frameworks/sproutcore/frameworks/desktop/views/list.js

@@ -76,6 +76,9 @@ SC.ListView = SC.CollectionView.extend(SC.CollectionRowDelegate,
   */
   acceptsFirstResponder: YES,
 
+  /** @private SC.CollectionView.prototype */
+  exampleView: SC.ListItemView,
+
   /**
     If set to YES, the default theme will show alternating rows
     for the views this ListView created through exampleView property.
@@ -134,7 +137,7 @@ SC.ListView = SC.CollectionView.extend(SC.CollectionRowDelegate,
     }
 
     if (!del) {
-      throw "Internal Inconsistancy: ListView must always have CollectionRowDelegate";
+      throw new Error("Internal Inconsistancy: ListView must always have CollectionRowDelegate");
     }
 
     del.addObserver('rowHeight', this, func);
@@ -318,20 +321,12 @@ SC.ListView = SC.CollectionView.extend(SC.CollectionRowDelegate,
     // find the smallest index changed; invalidate everything past it
     if (indexes && indexes.isIndexSet) indexes = indexes.get('min');
     this.reload(SC.IndexSet.create(indexes, len-indexes));
+
+    // If the row height changes, our entire layout needs to change.
+    this.invokeOnce('adjustLayout');
     return this ;
   },
 
-  /**
-    @private
-    When the length changes, so does the layout. CollectionView doesn't
-    know to do this, because it only asks for layout when it reloads--which
-    makes sense, as it is agnostic to any layout logic (for all it knows, the
-    items in the collection are not in a completely random order relative to layout)
-  */
-  _sclv_lengthDidChange: function() {
-    this.adjust(this.computeLayout());
-  }.observes('length'),
-
   // ..........................................................
   // SUBCLASS IMPLEMENTATIONS
   //
@@ -345,7 +340,7 @@ SC.ListView = SC.CollectionView.extend(SC.CollectionRowDelegate,
     var ret = this._sclv_layout;
     if (!ret) ret = this._sclv_layout = {};
     ret.minHeight = this.rowOffsetForContentIndex(this.get('length'));
-    this.set('calculatedHeight',ret.minHeight);
+    this.set('calculatedHeight', ret.minHeight);
     return ret ;
   },
 
@@ -647,19 +642,6 @@ SC.ListView = SC.CollectionView.extend(SC.CollectionRowDelegate,
     return [index, dropOperation];
   },
 
-  /** @private */
-  mouseWheel: function(evt) {
-    // The following commits changes in a list item that is being edited,
-    // if the list is scrolled.
-    var inlineEditor = SC.InlineTextFieldView.editor;
-    if(inlineEditor && inlineEditor.get('isEditing')){
-      if(inlineEditor.get('delegate').get('displayDelegate')===this){
-        SC.InlineTextFieldView.commitEditing();
-      }
-    }
-    return NO ;
-  },
-
   // ..........................................................
   // INTERNAL SUPPORT
   //

data/lib/frameworks/sproutcore/frameworks/desktop/views/list_item.js

@@ -38,7 +38,6 @@ SC.LIST_ITEM_ACTION_EJECT = 'sc-list-item-cancel-eject';
   @extends SC.View
   @extends SC.Control
   @extends SC.InlineEditable
-  @extends SC.StaticLayout
   @since SproutCore 1.0
 */
 SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
@@ -63,14 +62,6 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   // KEY PROPERTIES
   //
 
-  /**
-    The content object the list item will display.
-
-    @type SC.Object
-    @default null
-  */
-  content: null,
-
   /**
     The index of the content object in the ListView to which this
     ListItemView belongs.
@@ -273,8 +264,8 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   },
 
   /** @private */
-  contentPropertyDidChange: function() {
-    //if (this.get('isEditing')) this.discardEditing() ;
+  contentPropertyDidChange: function () {
+    //if (this.get('isEditing')) this.discardEditing();
     if (this.get('contentIsEditable') !== this.contentIsEditable()) {
       this.notifyPropertyChange('contentIsEditable');
     }
@@ -290,9 +281,9 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     @type Boolean
     @observes content
   */
-  contentIsEditable: function() {
+  contentIsEditable: function () {
     var content = this.get('content');
-    return content && (content.get ? content.get('isEditable')!==NO : NO);
+    return content && (content.get ? content.get('isEditable') !== NO : NO);
   }.property('content').cacheable(),
 
   /**
@@ -309,7 +300,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
 
     @returns {jQuery} jQuery object selecting label elements
   */
-  $label: function() {
+  $label: function () {
     return this.$('label');
   },
 
@@ -317,27 +308,27 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     Determines if the event occurred inside an element with the specified
     classname or not.
   */
-  _isInsideElementWithClassName: function(className, evt) {
+  _isInsideElementWithClassName: function (className, evt) {
     var layer = this.get('layer');
-    if (!layer) return NO ; // no layer yet -- nothing to do
+    if (!layer) return NO; // no layer yet -- nothing to do
 
-    var el = SC.$(evt.target) ;
+    var el = SC.$(evt.target);
     var ret = NO;
-    while(!ret && el.length>0 && (el[0] !== layer)) {
-      if (el.hasClass(className)) ret = YES ;
-      el = el.parent() ;
+    while (!ret && el.length > 0 && (el[0] !== layer)) {
+      if (el.hasClass(className)) ret = YES;
+      el = el.parent();
     }
     el = layer = null; //avoid memory leaks
-    return ret ;
+    return ret;
   },
 
   /** @private
     Returns YES if the list item has a checkbox and the event occurred
     inside of it.
   */
-  _isInsideCheckbox: function(evt) {
-    var del = this.displayDelegate ;
-    var checkboxKey = this.getDelegateProperty('contentCheckboxKey', del) ;
+  _isInsideCheckbox: function (evt) {
+    var del = this.displayDelegate;
+    var checkboxKey = this.getDelegateProperty('contentCheckboxKey', del);
     return checkboxKey && this._isInsideElementWithClassName('sc-checkbox-view', evt);
   },
 
@@ -345,8 +336,8 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     Returns YES if the list item has a disclosure triangle and the event
     occurred inside of it.
   */
-  _isInsideDisclosure: function(evt) {
-    if (this.get('disclosureState')===SC.LEAF_NODE) return NO;
+  _isInsideDisclosure: function (evt) {
+    if (this.get('disclosureState') === SC.LEAF_NODE) return NO;
     return this._isInsideElementWithClassName('sc-disclosure-view', evt);
   },
 
@@ -354,8 +345,8 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     Returns YES if the list item has a right icon and the event
     occurred inside of it.
   */
-  _isInsideRightIcon: function(evt) {
-    var del = this.displayDelegate ;
+  _isInsideRightIcon: function (evt) {
+    var del = this.displayDelegate;
     var rightIconKey = this.getDelegateProperty('hasContentRightIcon', del) || !SC.none(this.rightIcon);
     return rightIconKey && this._isInsideElementWithClassName('right-icon', evt);
   },
@@ -364,36 +355,36 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     mouseDown is handled only for clicks on the checkbox view or or action
     button.
   */
-  mouseDown: function(evt) {
+  mouseDown: function (evt) {
     // if content is not editable, then always let collection view handle the
     // event.
-    if (!this.get('contentIsEditable')) return NO ;
+    if (!this.get('contentIsEditable')) return NO;
 
     // if occurred inside checkbox, item view should handle the event.
     if (this._isInsideCheckbox(evt)) {
-      this._addCheckboxActiveState() ;
-      this._isMouseDownOnCheckbox = YES ;
-      this._isMouseInsideCheckbox = YES ;
-      return YES ; // listItem should handle this event
+      this._addCheckboxActiveState();
+      this._isMouseDownOnCheckbox = YES;
+      this._isMouseInsideCheckbox = YES;
+      return YES; // listItem should handle this event
 
     } else if (this._isInsideDisclosure(evt)) {
       this._addDisclosureActiveState();
       this._isMouseDownOnDisclosure = YES;
-      this._isMouseInsideDisclosure = YES ;
+      this._isMouseInsideDisclosure = YES;
       return YES;
     } else if (this._isInsideRightIcon(evt)) {
       this._addRightIconActiveState();
       this._isMouseDownOnRightIcon = YES;
-      this._isMouseInsideRightIcon = YES ;
+      this._isMouseInsideRightIcon = YES;
       return YES;
     }
 
-    return NO ; // let the collection view handle this event
+    return NO; // let the collection view handle this event
   },
 
   /** @private */
-  mouseUp: function(evt) {
-    var ret= NO, del, checkboxKey, content, state, idx, set;
+  mouseUp: function (evt) {
+    var ret = NO, del, checkboxKey, content, state, idx, set;
 
     // if mouse was down in checkbox -- then handle mouse up, otherwise
     // allow parent view to handle event.
@@ -401,19 +392,19 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
 
       // update only if mouse inside on mouse up...
       if (this._isInsideCheckbox(evt)) {
-        del = this.displayDelegate ;
+        del = this.displayDelegate;
         checkboxKey = this.getDelegateProperty('contentCheckboxKey', del);
-        content = this.get('content') ;
+        content = this.get('content');
         if (content && content.get) {
-          var value = content.get(checkboxKey) ;
-          value = (value === SC.MIXED_STATE) ? YES : !value ;
-          content.set(checkboxKey, value) ; // update content
+          var value = content.get(checkboxKey);
+          value = (value === SC.MIXED_STATE) ? YES : !value;
+          content.set(checkboxKey, value); // update content
           this.displayDidChange(); // repaint view...
         }
       }
 
-      this._removeCheckboxActiveState() ;
-      ret = YES ;
+      this._removeCheckboxActiveState();
+      ret = YES;
 
     // if mouse as down on disclosure -- handle mouse up.  otherwise pass on
     // to parent.
@@ -437,68 +428,69 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
       }
 
       this._removeDisclosureActiveState();
-      ret = YES ;
+      ret = YES;
     // if mouse was down in right icon -- then handle mouse up, otherwise
     // allow parent view to handle event.
     } else if (this._isMouseDownOnRightIcon) {
-      this._removeRightIconActiveState() ;
-      ret = YES ;
+      this._removeRightIconActiveState();
+      ret = YES;
     }
 
     // clear cached info
-    this._isMouseInsideCheckbox = this._isMouseDownOnCheckbox = NO ;
-    this._isMouseDownOnDisclosure = this._isMouseInsideDisclosure = NO ;
-    this._isMouseInsideRightIcon = this._isMouseDownOnRightIcon = NO ;
-    return ret ;
+    this._isMouseInsideCheckbox = this._isMouseDownOnCheckbox = NO;
+    this._isMouseDownOnDisclosure = this._isMouseInsideDisclosure = NO;
+    this._isMouseInsideRightIcon = this._isMouseDownOnRightIcon = NO;
+    return ret;
   },
 
   /** @private */
-  mouseMoved: function(evt) {
+  mouseMoved: function (evt) {
     if (this._isMouseDownOnCheckbox && this._isInsideCheckbox(evt)) {
-      this._addCheckboxActiveState() ;
-      this._isMouseInsideCheckbox = YES ;
+      this._addCheckboxActiveState();
+      this._isMouseInsideCheckbox = YES;
     } else if (this._isMouseDownOnCheckbox) {
-     this._removeCheckboxActiveState() ;
-     this._isMouseInsideCheckbox = NO ;
+      this._removeCheckboxActiveState();
+      this._isMouseInsideCheckbox = NO;
     } else if (this._isMouseDownOnDisclosure && this._isInsideDisclosure(evt)) {
       this._addDisclosureActiveState();
       this._isMouseInsideDisclosure = YES;
-   } else if (this._isMouseDownOnDisclosure) {
-     this._removeDisclosureActiveState();
-     this._isMouseInsideDisclosure = NO ;
+    } else if (this._isMouseDownOnDisclosure) {
+      this._removeDisclosureActiveState();
+      this._isMouseInsideDisclosure = NO;
     } else if (this._isMouseDownOnRightIcon && this._isInsideRightIcon(evt)) {
       this._addRightIconActiveState();
       this._isMouseInsideRightIcon = YES;
-   } else if (this._isMouseDownOnRightIcon) {
-     this._removeRightIconActiveState();
-     this._isMouseInsideRightIcon = NO ;
-   }
-   return NO ;
+    } else if (this._isMouseDownOnRightIcon) {
+      this._removeRightIconActiveState();
+      this._isMouseInsideRightIcon = NO;
+    }
+
+    return NO;
   },
 
   /** @private */
-  touchStart: function(evt){
+  touchStart: function (evt) {
     return this.mouseDown(evt);
   },
 
   /** @private */
-  touchEnd: function(evt){
+  touchEnd: function (evt) {
     return this.mouseUp(evt);
   },
 
   /** @private */
-  touchEntered: function(evt){
+  touchEntered: function (evt) {
     return this.mouseEntered(evt);
   },
 
   /** @private */
-  touchExited: function(evt){
+  touchExited: function (evt) {
     return this.mouseExited(evt);
   },
 
 
   /** @private */
-  _addCheckboxActiveState: function() {
+  _addCheckboxActiveState: function () {
     if (this.get('isEnabled')) {
       if (this._checkboxRenderDelegate) {
         var source = this._checkboxRenderSource;
@@ -514,7 +506,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   },
 
   /** @private */
-  _removeCheckboxActiveState: function() {
+  _removeCheckboxActiveState: function () {
     if (this._checkboxRenderer) {
       var source = this._checkboxRenderSource;
 
@@ -528,7 +520,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   },
 
   /** @private */
-  _addDisclosureActiveState: function() {
+  _addDisclosureActiveState: function () {
     if (this.get('isEnabled')) {
       if (this._disclosureRenderDelegate) {
         var source = this._disclosureRenderSource;
@@ -544,7 +536,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   },
 
   /** @private */
-  _removeDisclosureActiveState: function() {
+  _removeDisclosureActiveState: function () {
     if (this._disclosureRenderer) {
       var source = this._disclosureRenderSource;
       source.set('isActive', NO);
@@ -557,13 +549,13 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   },
 
   /** @private */
-  _addRightIconActiveState: function() {
-   this.$('img.right-icon').setClass('active', YES);
+  _addRightIconActiveState: function () {
+    this.$('img.right-icon').setClass('active', YES);
   },
 
   /** @private */
-  _removeRightIconActiveState: function() {
-   this.$('img.right-icon').removeClass('active');
+  _removeRightIconActiveState: function () {
+    this.$('img.right-icon').removeClass('active');
   },
 
   /** @private
@@ -576,23 +568,23 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     @param evt {Event} the mouseUp event.
     @returns {Boolean} YES if the mouse was on the content element itself.
   */
-  contentHitTest: function(evt) {
-   // if not content value is returned, not much to do.
-   var del = this.displayDelegate ;
-   var labelKey = this.getDelegateProperty('contentValueKey', del) ;
-   if (!labelKey) return NO ;
-
-   // get the element to check for.
-   var el = this.$label()[0] ;
-   if (!el) return NO ; // no label to check for.
-
-   var cur = evt.target, layer = this.get('layer') ;
-   while(cur && (cur !== layer) && (cur !== window)) {
-     if (cur === el) return YES ;
-     cur = cur.parentNode ;
-   }
+  contentHitTest: function (evt) {
+    // if not content value is returned, not much to do.
+    var del = this.displayDelegate;
+    var labelKey = this.getDelegateProperty('contentValueKey', del);
+    if (!labelKey) return NO;
+
+    // get the element to check for.
+    var el = this.$label()[0];
+    if (!el) return NO; // no label to check for.
+
+    var cur = evt.target, layer = this.get('layer');
+    while (cur && (cur !== layer) && (cur !== window)) {
+      if (cur === el) return YES;
+      cur = cur.parentNode;
+    }
 
-   return NO;
+    return NO;
   },
 
   /*
@@ -603,7 +595,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
       before editing begins
     @returns {Boolean} YES if successful
   */
-  beginEditing: function(original, scrollIfNeeded) {
+  beginEditing: function (original, scrollIfNeeded) {
     var el        = this.$label(),
         parent    = this.get('parentView');
 
@@ -612,15 +604,17 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     // and begin editing.  Right now collection view will regenerate the item
     // view too often.
     if (scrollIfNeeded && this.scrollToVisible()) {
-      var collectionView = this.get('owner'), idx = this.get('contentIndex');
-      this.invokeLast(function() {
+      var collectionView = this.get('owner'),
+        idx = this.get('contentIndex');
+
+      this.invokeLast(function () {
         var item = collectionView.itemViewForContentIndex(idx);
         if (item && item.beginEditing) item.beginEditing(NO);
       });
       return YES; // let the scroll happen then begin editing...
     }
 
-    else if (!parent || !el || el.get('length')===0) return NO ;
+    else if (!parent || !el || el.get('length') === 0) return NO;
 
     else return original();
   }.enhance(),
@@ -628,15 +622,14 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   /*
     Configures the editor to overlay the label properly.
   */
-  inlineEditorWillBeginEditing: function(editor, editable, value) {
+  inlineEditorWillBeginEditing: function (editor, editable, value) {
     var content   = this.get('content'),
         del       = this.get('displayDelegate'),
         labelKey  = this.getDelegateProperty('contentValueKey', del),
-        parent    = this.get('parentView'),
         el        = this.$label(),
         validator = this.get('validator'),
         f, v, offset, fontSize, top, lineHeight, escapeHTML,
-        lineHeightShift, targetLineHeight, ret ;
+        lineHeightShift, targetLineHeight;
 
     v = (labelKey && content) ? (content.get ? content.get(labelKey) : content[labelKey]) : content;
 
@@ -648,26 +641,26 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     fontSize = el.css('fontSize');
     top = this.$().css('top');
 
-    if (top) top = parseInt(top.substring(0,top.length-2),0);
-    else top =0;
+    if (top) top = parseInt(top.substring(0, top.length - 2), 0);
+    else top = 0;
 
     lineHeightShift = 0;
 
     if (fontSize && lineHeight) {
-      targetLineHeight = fontSize * 1.5 ;
+      targetLineHeight = fontSize * 1.5;
       if (targetLineHeight < lineHeight) {
         el.css({ lineHeight: '1.5' });
         lineHeightShift = (lineHeight - targetLineHeight) / 2;
-      } else oldLineHeight = null ;
+      } else this._oldLineHeight = null;
     }
 
     el = el[0];
     offset = SC.offset(el);
 
     f.x = offset.x;
-    f.y = offset.y+top + lineHeightShift ;
-    f.height = el.offsetHeight ;
-    f.width = el.offsetWidth ;
+    f.y = offset.y + top + lineHeightShift;
+    f.height = el.offsetHeight;
+    f.width = el.offsetWidth;
 
     escapeHTML = this.get('escapeHTML');
 
@@ -676,44 +669,43 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
       exampleFrame: f,
       exampleElement: el,
       multiline: NO,
-      isCollection: YES,
       validator: validator,
       escapeHTML: escapeHTML
-    }) ;
+    });
   },
 
   /** @private
     Allow editing.
   */
-  inlineEditorShouldBeginEditing: function(inlineEditor) {
+  inlineEditorShouldBeginEditing: function (inlineEditor) {
     return YES;
   },
 
   /** @private
    Hide the label view while the inline editor covers it.
   */
-  inlineEditorDidBeginEditing: function(original, inlineEditor, value, editable) {
+  inlineEditorDidBeginEditing: function (original, inlineEditor, value, editable) {
     original(inlineEditor, value, editable);
 
-    var el = this.$label() ;
+    var el = this.$label();
     this._oldOpacity = el.css('opacity');
-    el.css('opacity', 0.0) ;
+    el.css('opacity', 0.0);
 
     // restore old line height for original item if the old line height
     // was saved.
-    if (this._oldLineHeight) el.css({ lineHeight: this._oldLineHeight }) ;
+    if (this._oldLineHeight) el.css({ lineHeight: this._oldLineHeight });
   }.enhance(),
 
   /** @private
    Update the field value and make it visible again.
   */
-  inlineEditorDidCommitEditing: function(editor, finalValue, editable) {
-    var content = this.get('content') ;
-    var del = this.displayDelegate ;
-    var labelKey = this.getDelegateProperty('contentValueKey', del) ;
+  inlineEditorDidCommitEditing: function (editor, finalValue, editable) {
+    var content = this.get('content');
+    var del = this.displayDelegate;
+    var labelKey = this.getDelegateProperty('contentValueKey', del);
 
-    if(labelKey && content) {
-      if(content.set) content.set(labelKey, finalValue);
+    if (labelKey && content) {
+      if (content.set) content.set(labelKey, finalValue);
       else content[labelKey] = finalValue;
     }
 
@@ -724,12 +716,16 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     this._endEditing();
   },
 
-  _endEditing: function(original) {
+  _endEditing: function (original) {
     this.$label().css('opacity', this._oldOpacity);
 
     original();
   }.enhance(),
 
+  /** SC.ListItemView is not able to update itself in place at this time. */
+  // TODO: add update: support.
+  isReusable: false,
+
   /** @private
     Fills the passed html-array with strings that can be joined to form the
     innerHTML of the receiver element.  Also populates an array of classNames
@@ -739,7 +735,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     @param {Boolean} firstTime
     @returns {void}
   */
-  render: function(context, firstTime) {
+  render: function (context, firstTime) {
     var content = this.get('content'),
         del     = this.displayDelegate,
         level   = this.get('outlineLevel'),
@@ -747,36 +743,47 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
         key, value, working, classArray = [];
 
     // add alternating row classes
-    classArray.push((this.get('contentIndex')%2 === 0) ? 'even' : 'odd');
+    classArray.push((this.get('contentIndex') % 2 === 0) ? 'even' : 'odd');
     context.setClass('disabled', !this.get('isEnabled'));
     context.setClass('drop-target', this.get('isDropTarget'));
 
     // outline level wrapper
     working = context.begin("div").addClass("sc-outline");
-    if (level>=0 && indent>0) working.addStyle("left", indent*(level+1));
+    if (level >= 0 && indent > 0) working.addStyle("left", indent * (level + 1));
 
     // handle disclosure triangle
     value = this.get('disclosureState');
     if (value !== SC.LEAF_NODE) {
       this.renderDisclosure(working, value);
       classArray.push('has-disclosure');
-    }
+    } else if (this._disclosureRenderSource) {
+      // If previously rendered a disclosure, clean up.
+      context.removeClass('has-disclosure');
+      this._disclosureRenderSource.destroy();
 
+      this._disclosureRenderSource = this._disclosureRenderDelegate = null;
+    }
 
     // handle checkbox
-    key = this.getDelegateProperty('contentCheckboxKey', del) ;
+    key = this.getDelegateProperty('contentCheckboxKey', del);
     if (key) {
-      value = content ? (content.get ? content.get(key) : content[key]) : NO ;
+      value = content ? (content.get ? content.get(key) : content[key]) : NO;
       if (value !== null) {
         this.renderCheckbox(working, value);
         classArray.push('has-checkbox');
+      } else if (this._checkboxRenderSource) {
+        // If previously rendered a checkbox, clean up.
+        context.removeClass('has-checkbox');
+        this._checkboxRenderSource.destroy();
+
+        this._checkboxRenderSource = this._checkboxRenderDelegate = null;
       }
     }
 
     // handle icon
     if (this.getDelegateProperty('hasContentIcon', del)) {
-      key = this.getDelegateProperty('contentIconKey', del) ;
-      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+      key = this.getDelegateProperty('contentIconKey', del);
+      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null;
 
       if (value) {
         this.renderIcon(working, value);
@@ -789,36 +796,45 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     }
 
     // handle label -- always invoke
-    key = this.getDelegateProperty('contentValueKey', del) ;
-    value = (key && content) ? (content.get ? content.get(key) : content[key]) : content ;
+    key = this.getDelegateProperty('contentValueKey', del);
+    value = (key && content) ? (content.get ? content.get(key) : content[key]) : content;
     if (value && SC.typeOf(value) !== SC.T_STRING) value = value.toString();
     if (this.get('escapeHTML')) value = SC.RenderContext.escapeHTML(value);
     this.renderLabel(working, value);
 
     // handle right icon
     if (this.getDelegateProperty('hasContentRightIcon', del)) {
-      key = this.getDelegateProperty('contentRightIconKey', del) ;
-      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+      key = this.getDelegateProperty('contentRightIconKey', del);
+      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null;
 
+      if (value) {
+        this.renderRightIcon(working, value);
+        classArray.push('has-right-icon');
+      }
+    } else if (this.get('rightIcon')) {
+      value = this.get('rightIcon');
       this.renderRightIcon(working, value);
       classArray.push('has-right-icon');
     }
 
     // handle unread count
-    key = this.getDelegateProperty('contentUnreadCountKey', del) ;
-    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+    key = this.getDelegateProperty('contentUnreadCountKey', del);
+    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null;
     if (!SC.none(value) && (value !== 0)) {
-      this.renderCount(working, value) ;
+      this.renderCount(working, value);
       var digits = ['zero', 'one', 'two', 'three', 'four', 'five'];
       var valueLength = value.toString().length;
       var digitsLength = digits.length;
-      var digit = (valueLength < digitsLength) ? digits[valueLength] : digits[digitsLength-1];
-      classArray.push('has-count '+digit+'-digit');
+      var digit = (valueLength < digitsLength) ? digits[valueLength] : digits[digitsLength - 1];
+      classArray.push('has-count', digit + '-digit');
+    } else {
+      // If previously rendered a count, clean up.
+      context.removeClass('has-count');
     }
 
     // handle action
-    key = this.getDelegateProperty('listItemActionProperty', del) ;
-    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+    key = this.getDelegateProperty('listItemActionProperty', del);
+    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null;
     if (value) {
       this.renderAction(working, value);
       classArray.push('has-action');
@@ -827,7 +843,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     // handle branch
     if (this.getDelegateProperty('hasContentBranch', del)) {
       key = this.getDelegateProperty('contentIsBranchKey', del);
-      value = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
+      value = (key && content) ? (content.get ? content.get(key) : content[key]) : NO;
       this.renderBranch(working, value);
       classArray.push('has-branch');
     }
@@ -844,7 +860,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     @param {Boolean} state YES, NO or SC.MIXED_STATE
     @returns {void}
   */
-  renderDisclosure: function(context, state) {
+  renderDisclosure: function (context, state) {
     var renderer = this.get('theme').disclosureRenderDelegate;
 
     context = context.begin('div')
@@ -868,7 +884,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
 
     context = context.end();
     this._disclosureRenderDelegate = renderer;
- },
+  },
 
   /** @private
     Adds a checkbox with the appropriate state to the content.  This method
@@ -879,7 +895,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     @param {Boolean} state YES, NO or SC.MIXED_STATE
     @returns {void}
   */
-  renderCheckbox: function(context, state) {
+  renderCheckbox: function (context, state) {
     var renderer = this.get('theme').checkboxRenderDelegate;
 
     // note: checkbox-view is really not the best thing to do here; we should do
@@ -906,7 +922,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     context = context.end();
 
     this._checkboxRenderDelegate = renderer;
- },
+  },
 
   /** @private
     Generates an icon for the label based on the content.  This method will
@@ -917,20 +933,22 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     @param {String} icon a URL or class name.
     @returns {void}
   */
-  renderIcon: function(context, icon) {
+  renderIcon: function (context, icon) {
     // get a class name and url to include if relevant
-    var url = null, className = null , classArray=[];
+    var url = null, className = null, classArray = [];
     if (icon && SC.ImageView.valueIsUrl(icon)) {
-      url = icon; className = '' ;
+      url = icon;
+      className = '';
     } else {
-      className = icon; url = SC.BLANK_IMAGE_URL ;
+      className = icon;
+      url = SC.BLANK_IMAGE_URL;
     }
 
     // generate the img element...
-    classArray.push(className,'icon');
+    classArray.push(className, 'icon');
     context.begin('img')
             .addClass(classArray)
-            .attr('src', url)
+            .setAttr('src', url)
             .end();
   },
 
@@ -942,8 +960,8 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
    @param {String} label the label to display, already HTML escaped.
    @returns {void}
   */
-  renderLabel: function(context, label) {
-    context.push('<label>', label || '', '</label>') ;
+  renderLabel: function (context, label) {
+    context.push('<label>', label || '', '</label>');
   },
 
   /** @private
@@ -955,20 +973,24 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     @param {String} icon a URL or class name.
     @returns {void}
   */
-  renderRightIcon: function(context, icon) {
+  renderRightIcon: function (context, icon) {
     // get a class name and url to include if relevant
-    var url = null, className = null, classArray=[];
+    var url = null,
+      className = null,
+      classArray = [];
     if (icon && SC.ImageView.valueIsUrl(icon)) {
-      url = icon; className = '' ;
+      url = icon;
+      className = '';
     } else {
-      className = icon; url = SC.BLANK_IMAGE_URL ;
+      className = icon;
+      url = SC.BLANK_IMAGE_URL;
     }
 
     // generate the img element...
-    classArray.push('right-icon',className);
+    classArray.push('right-icon', className);
     context.begin('img')
       .addClass(classArray)
-      .attr('src', url)
+      .setAttr('src', url)
     .end();
   },
 
@@ -981,9 +1003,9 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
    @param {Number} count the count
    @returns {void}
   */
-  renderCount: function(context, count) {
+  renderCount: function (context, count) {
     context.push('<span class="count"><span class="inner">',
-                  count.toString(),'</span></span>') ;
+                  count.toString(), '</span></span>');
   },
 
   /** @private
@@ -994,8 +1016,8 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     @param {String} actionClassName the name of the action item
     @returns {void}
   */
-  renderAction: function(context, actionClassName) {
-    context.push('<img src="',SC.BLANK_IMAGE_URL,'" class="action" />');
+  renderAction: function (context, actionClassName) {
+    context.push('<img src="', SC.BLANK_IMAGE_URL, '" class="action" />');
   },
 
   /** @private
@@ -1006,9 +1028,9 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
    @param {Boolean} hasBranch YES if the item has a branch
    @returns {void}
   */
-  renderBranch: function(context, hasBranch) {
-    var classArray=[];
-    classArray.push('branch',hasBranch ? 'branch-visible' : 'branch-hidden');
+  renderBranch: function (context, hasBranch) {
+    var classArray = [];
+    classArray.push('branch', hasBranch ? 'branch-visible' : 'branch-hidden');
     context.begin('span')
           .addClass(classArray)
           .push('&nbsp;')