And now for another update :).

Back in part 2 of how to create a custom view in SproutCore, I provided a tutorial of how to modify the user summary view built in part 1 by updating the view to make use of a content object and monitor it for changes. The steps taken in part 2 was to first strip out some of the code that dealt with basic display properties and then replace it with new code to handle a content object. While everything works, I realized that the tutorial could be misleading in that your custom view can only deal with either regular display properties or a context object, which is not that case; you can have both. Here is the final code for the custom view in part 2:


MyApp.UserSummaryView = SC.View.extend(SC.ContentDisplay, {

  classNames: ['user-summary-view'],

  contentDisplayProperties: 'name description age'.w(),

  render: function(context, firstTime) {
    var name = '';
    var description = '';
    var age = '';
    var content = this.get('content');
    if (content != null)
    {
      name = content.get('name');
      description = content.get('description');
      age = content.get('age');
    }

    context = context.begin('div').addClass('user-summary-view-name').push(name).end();
    context = context.begin('div').addClass('user-summary-view-desc').push(description).end();
    context = context.begin('div').addClass('user-summary-view-age');
    context = context.begin('div').addClass('user-summary-view-age-value').push(age).end();
    context = context.begin('div').addClass('user-summary-view-age-capt').push('age').end();
    context = context.end();

    sc_super();
  }

});

So for our view to ALSO take advantage of regular display properties we can modify the view to be the following:


MyApp.UserSummaryView = SC.View.extend(SC.ContentDisplay, {

  classNames: ['user-summary-view'],

  foobar: '',

  displayProperties: ['foobar'],

  contentDisplayProperties: 'name description age'.w(),

  render: function(context, firstTime) {
    var name = '';
    var description = '';
    var age = '';
    var foobar = this.get('foobar');

    var content = this.get('content');
    if (content != null)
    {
      name = content.get('name');
      description = content.get('description');
      age = content.get('age');
    }

    context = context.begin('div').addClass('user-summary-view-name').push(name).end();
    context = context.begin('div').addClass('user-summary-view-desc').push(description).end();
    context = context.begin('div').addClass('user-summary-view-age');
    context = context.begin('div').addClass('user-summary-view-age-value').push(age).end();
    context = context.begin('div').addClass('user-summary-view-age-capt').push('age').end();
    // Make use of foobar
    context = context.begin('div').addClass('some-styling').push(foobar).end();
    context = context.end();

    sc_super();
  }

});

The code above shows the view with a plain old property called foobar and we’ve added to the displayProperties. Now the view will re-render if either the content object updates (for the properties we care about) or when the view’s foobar property is updated.

A hybrid of the two approaches can be useful in cases where your custom view gets information from other sources outside of the content object.

Advertisements