Question

I have some views, well bound to their respective models:

image.handlerbars:

URL:{{view Ember.TextField 
  valueBinding="EvEditor.imageModel.imgUrl" 
}}<br/>

text.handlerbars:

{{view Ember.TextField 
 valueBinding="EvEditor.titleModel.text" 
}}<br/>

I would now like to create a composite view that contains a number of images and text blocks:

var container = Ember.ContainerView.create({
    childViews: ['firstView', 'secondView', 'thirdView', 'fourthView'],
    firstView: App.TextView,
    secondView: App.TextView,
    thirdView: App.ImageView,
    fourthView: App.ImageView
});

Now, as it stands, every ImageView and TextView will contain the same data, rather than having a different instance of the ImageModel / TextView assigned to each.

What is the best way to architect this sort of thing ? I don’t really want my code that creates the views to also have to know what properties need to be passed into each view, for instance, do I ?

Ideally I’d write something like this pseudo-code:

var container = Ember.ContainerView.create({
    childViews: ['firstView', 'secondView', 'thirdView', 'fourthView'],
    firstView: {view=App.TextView, model=App.EmberObjectincomingData[0]},
    secondView: {view=App.TextView, model=App.EmberObjectincomingData[1]},
    thirdView: {view=App.ImageView, model=App.EmberObjectincomingData[2]},
    fourthView: {view=App.ImageView model=App.EmberObjectincomingData[3]},
});

Answer 1

Use something like https://stackoverflow.com/a/10225570/466772 and then add to the CollectionView :

for( var i=0;i<data.req.length;i++ ){
   var type=data.req[i],model={};
    if ( type == 'image'){
      model=imageModel.fromChangeFormat( data.data[i] );
    }else if (type.indexOf('title') >-1 || type.indexOf('text') > -1 ){
      data.req[i]='text';
      model=Ember.Object.create({                   
        text    : data.data[i]
       });
    }
    window.App.controller.addItem( data.req[i]+'View', model );
}

where window.App.controller is

controller = Em.ArrayProxy.create({
    content: [],
    addItem: function(itemType,data) {
        this.pushObject(App.Item.create({
            itemType: itemType,
            data:data
        }))
    }
});

then each View template can refer to view.content.data.foo where foo is a property in the correct Model for that View.

If the Model needs to attach customer observers or event handlers to the View for each item, you can do that in MyView before returning the string of the view (the this context is the View).