Skip to content

Instantly share code, notes, and snippets.

@publickeating
Last active August 29, 2015 14:01
Show Gist options
  • Save publickeating/f46b101ff3d4dd82a43c to your computer and use it in GitHub Desktop.
Save publickeating/f46b101ff3d4dd82a43c to your computer and use it in GitHub Desktop.
This is an example of a custom item view that contains childViews.
// Note: by mixing in SC.ContentDisplay, we get `content` added as a displayProperty
MyApp.CustomItemView = SC.View.extend(SC.ContentDisplay, {
// ---------------------------------------------------------------------------
// Properties
//
classNames: ['custom-item-view'],
content: null,
// When these properties change on the content, this view will redraw.
contentDisplayProperties: ['username'],
// When these properties change on the view, this view will redraw.
// Note that SC.CollectionView sets several properties on each item, including: content, isEnabled, isSelected, contentIndex
// @see http://docs.sproutcore.com/#doc=SC.CollectionView&method=exampleView&src=false
displayProperties: ['isSelected'], // content is not required, it is in SC.ContentDisplay
isSelected: false,
// ---------------------------------------------------------------------------
// Child Views
//
childViews: ['simpleChild', 'complexChild'],
// A simple child view that doesn't care about the content.
simpleChild: SC.ImageButtonView.extend({
action: 'deleteItem',
layout: { left: 8, centerY: 0, width: 30, height: 30 },
image: 'delete-item-button'
}),
// A complex child that depends on the content of the parent. This is less that ideal, but with proper item pooling, shouldn't be an issue.
complexChild: SC.View.extend({
// This will be assigned across from the parent using Option 1 or Option 2 below. If the parent is going to be doing some
// rendering, then I suspect Option 2 is better. If the parent is simply a container of other child views, then Option 1 may
// be better (and *don't* have any displayProperties/contentDisplayProperties on the parent if it's not going to render anything).
content: null,
// Ensure that this view updates when content changes.
displayProperties: ['content'],
layout: { left: 30, height: 100, right: 10, border: 1 },
// Option 1. Bind content. Whenever the content of the parent is set, this view's content will change.
contentBinding: SC.Binding.oneWay('.parentView.content'),
render: function (context) {
// Render our own whatever.
},
update: function (jqObject) {
// Update our own whatever.
}
}),
// ---------------------------------------------------------------------------
// Methods
//
render: function (context) {
var content = this.get('content'),
isSelected = this.get('isSelected'),
portionsOfContentForThisView = '';
// Add a selected class.
context.setClass({
sel: isSelected
});
// Get the content properties that *this* view will render (not the complexChild).
if (content) {
portionsOfContentForThisView = content.get('something');
}
// Render this view's content (note that the simpleChild and complexChild will render after this).
context = context.begin().addClass('custom-items-own-content');
context.push(portionsOfContentForThisView);
context = context.end();
// etc.
// Option 2. Don't bind the content up there. Set it across from down here.
this.setPath('complexChild.content', content);
},
update: function (jqObject) {
var content = this.get('content'),
isSelected = this.get('isSelected'),
portionsOfContentForThisView = '';
// Update the selected class.
jqObject.toggleClass('sel', isSelected);
// Get the content properties that *this* view will update (not the complexChild).
if (content) {
portionsOfContentForThisView = content.get('something');
}
// Update this view's content (note that the simpleChild will *not* update,
// but the complexChild will update itself since content changes for it)
jqObject.find('.custom-items-own-content').html(portionsOfContentForThisView);
// etc.
// Option 2 continued. Don't bind the content up there. Update it across from down here.
this.setPath('complexChild.content', content);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment