Getting data into child-child views without the controller
Hopefully you’ve seen the composite view tutorial,
http://www.itsgotwhatplantscrave.com/2009/07/29/composite-views/
It’s an excellent example of extending a view to save yourself from duplicating code. To give an example of how I used it, I had a particular “table view” that consisted of a lot of heavy styling. Which involved of course divs and classNames.
In the end, I wanted to reuse this “table view” in several difference places (3, to be exact). After following Evins guide, I was set; almost.
Say your table has a header title, and its the third child view down. When you duplicate this table view, you’ll probably want a unique title for every table header. You can create a property on the parent that will be easily accessible to your instance of this view ( SC.myView.design({}) ) to directly pass it a value. Its basic, I know, but hey, I’m new!
MyApp.MyCustomView = SC.View.extend({
headerTitle: ”,
createChildViews: function(){
var childViews = [],view;
view = this.createChildView (
SC.View.design ({
classNames: ‘contentCalloutHeader’,
layout: { left: 17, top: 40, width: 50, height:20},
childViews: ‘calloutTextHeader’.w(),
calloutTextHeader: SC.LabelView.design ({
classNames: ‘calloutTextHeader’,
layout: { left: 17, top: 0, width:20, height: 10},
valueBinding: ‘.parentView.parentView.headerTitle’
})
}),
Now, over in your design, you can simply set a value
someView: MyApp.MyCustomView.design({
layout: {top: 30,left: 20, height: 200, width: 200 },
headerTitle:’A Unique String’
And there you have it, setting a property on a parent to get it down into a child view.
I realize this is practically what Evin was doing, except with bindings all around. The thing for me, about bindings, is I don’t really know what they are doing, so I’m never really sure what I can get away with doing. I was happy to learn I could just set a text value, and it would be picked up far down in the child child views. For me, a lot of the learning process is just discovering what I can do in the language.
Ideally, I think you’d want to have a controller have a property, and just bind to that, this way your controller is supplying data to your view, instead of your hard coding it in. Also when using .parentView be aware that views can be added & removed, so *parentView.headerTitle may help you in that case. Especially inside a scrollview.
You can read more about chained & relative bindings here
