Last active
August 29, 2015 14:01
-
-
Save publickeating/f46b101ff3d4dd82a43c to your computer and use it in GitHub Desktop.
This is an example of a custom item view that contains childViews.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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