Martin Ottenwaelter

SC.$ doesn’t support complex selectors for performance reasons. For example, the following queries will return an empty or incorrect result set:

SC.$('.foo .bar:first-child')
SC.$(':empty')
SC.$('foo > bar')

If you don’t need your application to be compatible with IE 7 and Firefox 3.0, you can use the querySelectorAll method to overcome that limitation:

MyApp.$ = function(str) {
  return SC.$(document.querySelectorAll(str));
}

If you’re trying to automate tests of your SproutCore application with Selenium, for example, you’ll realise that the HTML element ids are automatically generated. They change every now and then and break all your tests.

To get rid of this problem, you can override the layerId method of certain view classes to generate a stable, and human readable, id.

The following code takes the view hierarchy, and generates an id based on the parents’ names. For example, the mainPage.mainView.someOtherView.theTargetView view will be given the mmsome.theTargetView id.

CT._ct_layerId = function() {
  var k1, k2, k3, k4, guid;

  if (!this._ct_layerId_cache) {
    guid = SC.guidFor(this);

    // Compute the new value
    k1 = this.get('keyForParentView');

    // If k1 is null, defer the computation to later...
    if (!k1) return SC.guidFor(this);

    // Finish the computation
    k2 = this.getPath('parentView.keyForParentView') || '';
    k3 = this.getPath('parentView.parentView.keyForParentView') || '';
    k4 = this.getPath('parentView.parentView.parentView.keyForParentView') || '';

    // Cache the result
    this._ct_layerId_cache = k4.substr(0,1) + k3.substr(0,1) + k2.substr(0,4) + '.' + k1;

    // If the id is already taken, fallback to guid
    if (SC.View.views[this._ct_layerId_cache]) {
      this._ct_layerId_cache = guid;

    // else, update the SC.View.views hash with the new value
    } else {
      delete SC.View.views[guid];
      SC.View.views[this._ct_layerId_cache] = this;
    }
  }

  return this._ct_layerId_cache;
}.property();

SC.View.prototype.mixin({

  keyForParentView: function() {
    var parentView = this.get('parentView'),
        key;
    for (key in parentView) {
      if (this === parentView[key]) return key;
    }
    return null;
  }.property()

});

SC.TextFieldView.prototype.mixin({
  layerId: CT._ct_layerId
});

SC.LabelView.prototype.mixin({
  layerId: CT._ct_layerId
});

SC.ImageView.prototype.mixin({
  layerId: CT._ct_layerId
});

You can add or overwrite a class property using the mixin method on the class prototype. The following example dynamically adds a keyForParentView method on the SC.View class without modifying SproutCore’s source code:

SC.View.prototype.mixin({
  keyForParentView: function() {
    var parentView = this.get('parentView'),
        key;
    for (key in parentView) {
      if (this === parentView[key]) return key;
    }
    return null;
  }
});

SproutCore’s SC.Response was recently rewritten and I patched it to avoid an exception to be thrown when a malformed JSON string was parsed. The standard way to write your data source didFetch method is now:

didFetch: function(response, params) {
  var results, query = params.query;
  if (SC.ok(response) && SC.ok(results = response.get('body'))) {
    ...
  } else {
    store.dataSourceDidErrorQuery(query);
  }
}