Help me figure this UI out!

1

Hi

I have been hacking away at getting a prototype set up using emberJS and now I am working out how to do the UI stuff…

I want to have a UI that shows data for a music event. So I have a music-event route/template/controller - and using link-to from a search result takes me to that UI using the music events slug.

The route is configured so that it takes that slug and does an API call to get the data for the music event itself.

Now, inside the music-event template I want to display the schedule for that music event. So I have created a lineup-viewer template. route and controller.

My initial plan was to render it into the main outlet in the music-event template and by using the following route it would just show;

  this.resource('music-event', { path: '/event/:Slug'}, function(){
  	this.route('lineup-viewer');
  });

WRONG!!

I have also tried using:

renderTemplate: function(){
	this.render('lineup-viewer', {
		into: 'music-event',
		outlet: 'lineup-viewer'
	});
}

And naming the main outlet ‘lineup-viewer’

Doesn’t work :confused:

So… what is the trick I am missing here?

Ideally I want the lineup-viewer to render into the music-event template and load it’s own data…

2

So I kind of have this working with {{render "lineup-viewer"}} but the model hook on the lineup-viewer route isn’t being called?

3

Sorry I am still too new to help, but… @eccegordo showed me jsbin where you can build a tiny example of what you are trying to do and other people can read the code and help out. Here is a tiny bin I made.

4

The correct way to render a controller inside a template is through the render outlet, as you said in your last message.

Bad thing is, it is associated with no route, so your route will never be called.

It looks like you want to use a component, but I’m not understanding the use case. You have an event and you want to display its details in a template. Thus, why you didn’t include the schedule data as attributes of the event model itself?

5

The lineups can be HUGE (for glastonbury festival in particular there are thousands of lineups and even more artists associated with the lineup) so they are a separate thing.

6

Why can’t things just work the way you expect!? I guess I can pass an initial model into the templates controller or something then do the filtering inside that controller? rather than having the route do the initializing of the model?

7

I would create a new route then.

Like having a button somewhere in your event template with {{link-to ‘event.lineup’ event_model lineup}}

So that you’ll be in /event_name route for you event data, and /event_name/lineup for your lineup.

Have you correctly defined the route of your first message in the route.js file?

8

This would mean the user would need to click a button to see the lineup right?

9

Yes that would be right.

However, if a lineup is really huge, is probable thta your users aren’t going to read all the information one, instead they would scroll the UI or something… Have you though about a infinite scroll that would load the information about the lineup? Discourse has a good one on that.

Probably it would require a little rearrangement in your model data, try to have as many relations a possible so that the loading of more information, aka releted object would be carried by ember-data almost seamlessly…

10

That’s the whole reason I want it as a separate component - to isolate the complexity :slight_smile: