sproutcore 1.7.1.beta → 1.8.0

data/lib/frameworks/sproutcore/frameworks/{core_foundation → template_view}/mixins/template_helpers/text_field_support.js

@@ -65,7 +65,7 @@ SC.TextFieldSupport = /** @scope SC.TextFieldSupport */{
 
     input.val(this._value);
 
-    if (SC.browser.msie) {
+    if (SC.browser.isIE) {
       SC.Event.add(input, 'focusin', this, this.focusIn);
       SC.Event.add(input, 'focusout', this, this.focusOut);
     } else {
@@ -77,7 +77,7 @@ SC.TextFieldSupport = /** @scope SC.TextFieldSupport */{
   willDestroyLayerMixin: function() {
     var input = this.$input();
 
-    if (SC.browser.msie) {
+    if (SC.browser.isIE) {
       SC.Event.remove(input, 'focusin', this, this.focusIn);
       SC.Event.remove(input, 'focusout', this, this.focusOut);
     } else {
@@ -129,7 +129,18 @@ SC.TextFieldSupport = /** @scope SC.TextFieldSupport */{
     } else if (event.keyCode === SC.Event.KEY_ESC) {
       return this.tryToPerform('cancel', event);
     }
+  },
+
+  /** @private
+    RootResponder will call this function whenever a selection
+    event has occurred, for instance a select all. Simply return
+    true so that all selection events bubble up to the browser,
+    triggering the default browser behavior.
+  */
+  selectStart: function() {
+    return true;
   }
+
 };
 
 /**

data/lib/frameworks/sproutcore/frameworks/{core_foundation → template_view}/tests/views/template/collection.js

@@ -15,39 +15,64 @@ test("creating a collection view works", function() {
     template: SC.Handlebars.compile('<b>{{content.title}}</b>')
   });
 
-  var ListItemChildView = CollectionChildView.extend({ tagName: "li" });
   var DefinitionTermChildView = CollectionChildView.extend({ tagName: "dt" });
+  var CustomChildView = CollectionChildView.extend({ tagName: "p" });
 
   var CollectionView = SC.TemplateCollectionView.extend({
     content: [{title: 'Hello'}]
   });
-  
+
   var defaultCollectionView = CollectionView.create();
   var ulCollectionView  = CollectionView.create({ tagName: "ul" });
   var olCollectionView  = CollectionView.create({ tagName: "ol" });
-  var dlCollectionView  = CollectionView.create({ tagName: "dl", itemView: DefinitionTermChildView });
-  var customTagCollectionView = CollectionView.create({ tagName: "p" });
-  
+  var dlCollectionView  = CollectionView.create({ tagName: "dl" });
+  var dlCollectionView2  = CollectionView.create({ tagName: "dl", itemView: DefinitionTermChildView });
+  var dlCollectionView3  = CollectionView.create({ tagName: "dl", itemView: CustomChildView });
+  var dlCollectionView4  = CollectionView.create({ tagName: "dl", itemViewOptions: { tagName: "li"} });
+  var dlCollectionView5  = CollectionView.create({ tagName: "dl", itemViewOptions: { tagName: "li"}, itemView: CustomChildView });
+  var selectCollectionView  = CollectionView.create({ tagName: "select" });
+  var customTagCollectionView = CollectionView.create({ tagName: "p", itemView: CustomChildView });
+
   defaultCollectionView.createLayer();
   ulCollectionView.createLayer();
   olCollectionView.createLayer();
   dlCollectionView.createLayer();
+  dlCollectionView2.createLayer();
+  dlCollectionView3.createLayer();
+  dlCollectionView4.createLayer();
+  dlCollectionView5.createLayer();
+  selectCollectionView.createLayer();
   customTagCollectionView.createLayer();
-  
+
   ok(defaultCollectionView.$().is("ul"), "Unordered list collection view was rendered (Default)");
-  equals(defaultCollectionView.$('li').length, 1, "List item view was rendered (Default)");
+  equals(defaultCollectionView.$('li').length, 1, "List item was rendered (Default)");
 
   ok(ulCollectionView.$().is("ul"), "Unordered list collection view was rendered");
-  equals(ulCollectionView.$('li').length, 1, "List item view was rendered");
+  equals(ulCollectionView.$('li').length, 1, "List item was rendered");
 
   ok(olCollectionView.$().is("ol"), "Ordered collection collection view was rendered");
-  equals(olCollectionView.$('li').length, 1, "List item view was rendered");
+  equals(olCollectionView.$('li').length, 1, "List item was rendered");
 
   ok(dlCollectionView.$().is("dl"), "Definition List collection view was rendered");
-  equals(dlCollectionView.$('dt').length, 1, "Definition term view was rendered");
-  
+  equals(dlCollectionView.$('dt').length, 1, "Definition term was rendered (Default).");
+
+  ok(dlCollectionView2.$().is("dl"), "Definition List collection view was rendered");
+  equals(dlCollectionView2.$('dt').length, 1, "Definition term was rendered (when specified in itemView).");
+
+  ok(dlCollectionView3.$().is("dl"), "Definition List collection view was rendered");
+  equals(dlCollectionView3.$('p').length, 1, "Paragraph was rendered (when specified in itemView).");
+
+  ok(dlCollectionView4.$().is("dl"), "Definition List collection view was rendered");
+  equals(dlCollectionView4.$('li').length, 1, "List item was rendered (when specified in itemViewOptions.tagName).");
+
+  ok(dlCollectionView4.$().is("dl"), "Definition List collection view was rendered");
+  equals(dlCollectionView4.$('li').length, 1, "List item was rendered (when specified in itemViewOptions.tagName and also specified in itemView).");
+
+  ok(selectCollectionView.$().is("select"), "Select collection view was rendered");
+  equals(selectCollectionView.$('option').length, 1, "Option view was rendered");
+
   ok(customTagCollectionView.$().is("p"), "Paragraph collection view was rendered");
-  equals(customTagCollectionView.$('div').length, 1, "Child view was rendered");
+  equals(customTagCollectionView.$('p').length, 1, "Custom child view was rendered");
 });
 
 test("not passing a block to the collection helper creates a collection", function() {
@@ -345,7 +370,7 @@ test("should render inverse template when its present and there is no content",
 
   view.createLayer();
 
-  equals(view.$('h1').text(), 'inverse', 'collection view with no content and inverse template should render inverse template')
+  equals(view.$('h1').text(), 'inverse', 'collection view with no content and inverse template should render inverse template');
 });
 
 test("should render inverse template name when its present and there is no content", function() {
@@ -366,7 +391,7 @@ test("should render inverse template name when its present and there is no conte
 
   view.createLayer();
 
-  equals(view.$('h1').text(), 'inverse template from file', 'collection view with no content and inverse template name should render template')
+  equals(view.$('h1').text(), 'inverse template from file', 'collection view with no content and inverse template name should render template');
 });
 
 test("#collection helper should allow relative paths for the collection view class", function() {

data/lib/frameworks/sproutcore/frameworks/{core_foundation → template_view}/tests/views/template/handlebars.js

@@ -60,6 +60,8 @@
 */
 module("SC.TemplateView - handlebars integration");
 
+TemplateTests = {};
+
 test("template view should call the function of the associated template", function() {
   var view = SC.TemplateView.create({
     templateName: 'test_template',
@@ -95,6 +97,27 @@ test("template view should call the function of the associated template with its
   equals("template was called for Tom DAAAALE1. Yea Tom DAAAALE1", view.$('#twas-called').text(), "the named template was called with the view as the data source");
 });
 
+test("template view should call the function of the associated template with itself as the context", function() {
+  var view = SC.TemplateView.create({
+    template: SC.Handlebars.compile('<div id="not-escaped">{{{notEscaped}}}</div><div id="escaped">{{escaped}}</div>'),
+    notEscaped: '<p>NOT_ESCAPED</p>',
+    escaped: '<p>ESCAPED</p>'
+  });
+
+  view.createLayer();
+
+  equals("&lt;p&gt;ESCAPED&lt;/p&gt;", view.$('#escaped span')[0].innerHTML, "the value was properly inserted escaped");
+  equals("<p>NOT_ESCAPED</p>", view.$('#not-escaped span')[0].innerHTML, "the value was properly inserted unescaped");
+
+  SC.run(function() {
+    view.set('notEscaped', '<br>NOT_ESCAPED<br>');
+    view.set('escaped', '<br>ESCAPED<br>');
+  });
+
+  equals("&lt;br&gt;ESCAPED&lt;br&gt;", view.$('#escaped span')[0].innerHTML, "the value was properly inserted escaped");
+  equals("<br>NOT_ESCAPED<br>", view.$('#not-escaped span')[0].innerHTML, "the value was properly inserted unescaped");
+});
+
 test("should allow values from normal JavaScript hash objects to be used", function() {
   var view = SC.TemplateView.create({
     template: SC.Handlebars.compile('{{#with person}}{{firstName}} {{lastName}} (and {{pet.name}}){{/with}}'),
@@ -542,6 +565,34 @@ test("should update the block when object passed to #if helper changes and an in
   });
 });
 
+test("views nested within an #if helper should be destroyed every time they are removed", function() {
+  var view, didCreateLayerCalled = 0, willDestroyLayerCalled = 0;
+
+  TemplateTests.someView = SC.TemplateView.extend({
+    template: SC.Handlebars.compile("<h1>hello</h1>"),
+    didCreateLayer: function() { didCreateLayerCalled++; },
+    willDestroyLayer: function() { willDestroyLayerCalled++; }
+  });
+
+  view = SC.TemplateView.create({
+    template: SC.Handlebars.compile('{{#if foo}}{{view TemplateTests.someView}}{{/if}}'),
+    foo: true
+  });
+
+  view.createLayer();
+
+  SC.run(function() { view.set('foo', false); });
+
+  equals(didCreateLayerCalled, 1, 'didCreateLayer should have been called once');
+  equals(willDestroyLayerCalled, 1, 'willDestroyLayer should have been called once');
+
+  SC.run(function() { view.set('foo', true); });
+  SC.run(function() { view.set('foo', false); });
+
+  equals(didCreateLayerCalled, 2, 'didCreateLayer should have been called twice');
+  equals(willDestroyLayerCalled, 2, 'willDestroyLayer should have been called twice');
+});
+
 test("Should insert a localized string if the {{loc}} helper is used", function() {
   SC.stringsFor('en', {
     'Brazil': 'Brasilia'
@@ -855,14 +906,14 @@ test("should be able to bind element attributes using {{bindAttr}}", function()
   var view = SC.TemplateView.create({
     template: template,
     content: SC.Object.create({
-      url: "http://www.sproutcore.com/assets/images/logo.png",
+      url: "http://www.sproutcore.com/img/branding/logo/png/dark.png",
       title: "The SproutCore Logo"
     })
   });
 
   view.createLayer();
 
-  equals(view.$('img').attr('src'), "http://www.sproutcore.com/assets/images/logo.png", "sets src attribute");
+  equals(view.$('img').attr('src'), "http://www.sproutcore.com/img/branding/logo/png/dark.png", "sets src attribute");
   equals(view.$('img').attr('alt'), "The SproutCore Logo", "sets alt attribute");
 
   SC.run(function() {
@@ -882,7 +933,7 @@ test("should be able to bind element attributes using {{bindAttr}}", function()
 
   SC.run(function() {
     view.set('content', {
-      url: "http://www.sproutcore.com/assets/images/logo.png",
+      url: "http://www.sproutcore.com/img/branding/logo/png/dark.png",
       title: "The SproutCore Logo"
     });
   });
@@ -891,7 +942,7 @@ test("should be able to bind element attributes using {{bindAttr}}", function()
 
   SC.run(function() {
     view.set('content', {
-      url: "http://www.sproutcore.com/assets/images/logo.png",
+      url: "http://www.sproutcore.com/img/branding/logo/png/dark.png",
       title: function() {
         return "Nanananana SproutCore!";
       }
@@ -931,14 +982,14 @@ test("should be able to bind element attributes using {{bindAttr}} inside a bloc
   var view = SC.TemplateView.create({
     template: template,
     content: SC.Object.create({
-      url: "http://www.sproutcore.com/assets/images/logo.png",
+      url: "http://www.sproutcore.com/img/branding/logo/png/dark.png",
       title: "The SproutCore Logo"
     })
   });
 
   view.createLayer();
 
-  equals(view.$('img').attr('src'), "http://www.sproutcore.com/assets/images/logo.png", "sets src attribute");
+  equals(view.$('img').attr('src'), "http://www.sproutcore.com/img/branding/logo/png/dark.png", "sets src attribute");
   equals(view.$('img').attr('alt'), "The SproutCore Logo", "sets alt attribute");
 
   SC.run(function() {

data/lib/frameworks/sproutcore/frameworks/{core_foundation → template_view}/views/bindable_span.js

@@ -88,6 +88,10 @@ SC._BindableSpan = SC.TemplateView.extend(
     @param {SC.RenderContext} renderContext}
   */
   render: function(renderContext) {
+    // If not invoked via a triple-mustache ({{{foo}}}), escape
+    // the content of the template.
+    var escape = this.get('isEscaped');
+
     var shouldDisplay = this.get('shouldDisplayFunc'),
         property = this.get('property'),
         preserveContext = this.get('preserveContext'),
@@ -96,7 +100,16 @@ SC._BindableSpan = SC.TemplateView.extend(
     var inverseTemplate = this.get('inverseTemplate'),
         displayTemplate = this.get('displayTemplate');
 
-    var result = context.getPath(property);
+    var result;
+
+
+    // Use the current context as the result if no
+    // property is provided.
+    if (property === '') {
+      result = context;
+    } else {
+      result = context.getPath(property);
+    }
 
     // First, test the conditional to see if we should
     // render the template or not.
@@ -108,14 +121,16 @@ SC._BindableSpan = SC.TemplateView.extend(
       if (preserveContext) {
         this.set('context', context);
       } else {
-      // Otherwise, determine if this is a block bind or not.
-      // If so, pass the specified object to the template
+        // Otherwise, determine if this is a block bind or not.
+        // If so, pass the specified object to the template
         if (displayTemplate) {
           this.set('context', result);
         } else {
-        // This is not a bind block, just push the result of the
-        // expression to the render context and return.
-          renderContext.push(Handlebars.Utils.escapeExpression(result));
+          // This is not a bind block, just push the result of the
+          // expression to the render context and return.
+          if (result == null) { result = ""; } else { result = String(result); }
+          if (escape) { result = Handlebars.Utils.escapeExpression(result); }
+          renderContext.push(result); //Handlebars.Utils.escapeExpression(result));
           return;
         }
       }

data/lib/frameworks/sproutcore/frameworks/{core_foundation → template_view}/views/template.js

@@ -1,9 +1,9 @@
+sc_require("handlebars");
 sc_require("ext/handlebars");
 sc_require("ext/handlebars/bind");
 sc_require("ext/handlebars/collection");
 sc_require("ext/handlebars/localization");
 sc_require("ext/handlebars/view");
-sc_require("views/view");
 
 // Global hash of shared templates. This will automatically be populated
 // by the build tools so that you can store your Handlebars templates in
@@ -109,11 +109,17 @@ SC.TemplateView = SC.CoreView.extend(
     @param {SC.RenderContext} context the render context
   */
   render: function(context) {
-    var template = this.get('template');
+    var data,
+        output,
+        template = this.get('template'),
+        templateContext = this.get('context');
 
     this._didRenderChildViews = YES;
 
-    context.push(template(this.get('context'), null, null, { view: this, isRenderData: true }));
+    data = { view: this, isRenderData: true };
+    output = template(templateContext, { data: data });
+
+    context.push(output);
   },
 
   // in TemplateView, updating is handled by observers created by helpers in the

data/lib/frameworks/sproutcore/frameworks/{core_foundation → template_view}/views/template_collection.js

@@ -19,8 +19,23 @@ SC.TemplateCollectionView = SC.TemplateView.extend(
     @default ul
   */
   tagName: 'ul',
+
+  /**
+    A list of items to be displayed by the TemplateCollectionView.
+
+    @type SC.Array
+    @default null
+  */
   content: null,
+
   template: SC.Handlebars.compile(''),
+
+  /**
+    An optional view to display if content is set to an empty array.
+
+    @type SC.TemplateView
+    @default null
+  */
   emptyView: null,
 
   /**
@@ -50,6 +65,10 @@ SC.TemplateCollectionView = SC.TemplateView.extend(
     }
   },
 
+  /**
+    @type SC.TemplateView
+    @default SC.TemplateView
+  */
   itemView: 'SC.TemplateView',
 
   /**
@@ -132,10 +151,13 @@ SC.TemplateCollectionView = SC.TemplateView.extend(
       extensions.template = itemViewTemplate;
     }
 
-    if (this.get('tagName') === 'ul' || this.get('tagName') === 'ol') {
-      extensions.tagName = 'li';
-    } else if (this.get('tagName') === 'table' || this.get('tagName') === 'thead' || this.get('tagName') === 'tbody') {
-      extensions.tagName = 'tr';
+    // If the itemView has not defined a unique tagName, then check for a unique item tagName
+    // to match the given collection tagName.  This is safe, since the unique item tagNames
+    // are required by HTML to be children of the special collection tagName.  If the collection
+    // doesn't have a special tagName, then the default value of SC.TemplateView is still
+    // used.
+    if (itemView.prototype.tagName === SC.TemplateView.prototype.tagName) {
+      extensions.tagName = this.get('itemTagName');
     }
 
     return itemView.extend(extensions);
@@ -252,30 +274,31 @@ SC.TemplateCollectionView = SC.TemplateView.extend(
       delete itemOptions['class'];
       delete itemOptions.classBinding;
 
-    for (idx = 0; idx < len; idx++) {
-      item = addedObjects.objectAt(idx);
-      childView = this.createChildView(itemViewClass.extend(itemOptions, {
-        content: item,
-        render: renderFunc,
-        tagName: itemViewClass.prototype.tagName || this.get('itemTagName')
-      }));
-
-      var contextProperty = childView.get('contextProperty');
-      if (contextProperty) {
-        childView.set('context', childView.get(contextProperty));
+      for (idx = 0; idx < len; idx++) {
+        item = addedObjects.objectAt(idx);
+        childView = this.createChildView(itemViewClass.extend(itemOptions, {
+          content: item,
+          render: renderFunc,
+          // Use the itemTagName property if it is set, over the tagName of the itemViewClass which is 'div' by default
+          tagName: itemOptions.tagName || itemViewClass.prototype.tagName
+        }));
+
+        var contextProperty = childView.get('contextProperty');
+        if (contextProperty) {
+          childView.set('context', childView.get(contextProperty));
+        }
+
+        itemElem = childView.createLayer().$();
+        if (!insertAtElement) {
+          elem.append(itemElem);
+        } else {
+          itemElem.insertAfter(insertAtElement);
+        }
+        insertAtElement = itemElem;
+
+        addedViews.push(childView);
       }
 
-      itemElem = childView.createLayer().$();
-      if (!insertAtElement) {
-        elem.append(itemElem);
-      } else {
-        itemElem.insertAfter(insertAtElement);
-      }
-      insertAtElement = itemElem;
-
-      addedViews.push(childView);
-    }
-
       childViews.replace(start, 0, addedViews);
     }
 
@@ -298,6 +321,8 @@ SC.TemplateCollectionView = SC.TemplateView.extend(
 
   itemTagName: function() {
     switch(this.get('tagName')) {
+      case 'dl':
+        return 'dt';
       case 'ul':
       case 'ol':
         return 'li';
@@ -306,6 +331,10 @@ SC.TemplateCollectionView = SC.TemplateView.extend(
       case 'tbody':
       case 'tfoot':
         return 'tr';
+      case 'select':
+        return 'option';
+      default:
+        return SC.TemplateView.prototype.tagName;
     }
   }.property('tagName'),