# Help me figure this UI out! **URL:** \ **Category:** Uncategorized\ **Created:** [October 10, 2014, 3:28pm UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468 "2014-10-10T15:28:52Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\ **Post date:** [October 10, 2014, 3:28pm UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468/1 "2014-10-10T15:28:52Z")
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 😕 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… ---
**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\ **Post date:** [October 10, 2014, 3:38pm UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468/2 "2014-10-10T15:38:52Z")
So I kind of have this working with `{{render "lineup-viewer"}}` but the model hook on the lineup-viewer route isn’t being called? ---
**Author:** ![Ramcat](https://avatars.discourse-cdn.com/v4/letter/r/65b543/32.png) [@Ramcat](https://discuss.emberjs.com/u/Ramcat)\ **Post date:** [October 10, 2014, 7:22pm UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468/3 "2014-10-10T19:22:45Z")
Sorry I am still too new to help, but… @eccegordo showed me [jsbin](http://emberjs.jsbin.com/) 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](http://emberjs.jsbin.com/badedoyivuxi/1/edit). ---
**Author:** ![nandosan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nandosan/32/267_2.png) [@nandosan](https://discuss.emberjs.com/u/nandosan)\ **Post date:** [October 12, 2014, 10:23am UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468/4 "2014-10-12T10:23:07Z")
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? ---
**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\ **Post date:** [October 12, 2014, 10:26am UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468/5 "2014-10-12T10:26:09Z")
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. ---
**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\ **Post date:** [October 12, 2014, 10:30am UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468/6 "2014-10-12T10:30:33Z")
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? ---
**Author:** ![nandosan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nandosan/32/267_2.png) [@nandosan](https://discuss.emberjs.com/u/nandosan)\ **Post date:** [October 12, 2014, 10:30am UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468/7 "2014-10-12T10:30:38Z")
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? ---
**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\ **Post date:** [October 12, 2014, 10:31am UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468/8 "2014-10-12T10:31:28Z")
This would mean the user would need to click a button to see the lineup right? ---
**Author:** ![nandosan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nandosan/32/267_2.png) [@nandosan](https://discuss.emberjs.com/u/nandosan)\ **Post date:** [October 13, 2014, 6:09am UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468/9 "2014-10-13T06:09:38Z")
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… ---
**Author:** ![Wayne\_Douglas](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wayne_douglas/32/9568_2.png) [@Wayne\_Douglas](https://discuss.emberjs.com/u/Wayne_Douglas)\ **Post date:** [October 13, 2014, 6:25am UTC](https://discuss.emberjs.com/t/help-me-figure-this-ui-out/6468/10 "2014-10-13T06:25:44Z")
That’s the whole reason I want it as a separate component - to isolate the complexity 🙂