# Render list, but how?

**URL:** <https://discuss.emberjs.com/t/render-list-but-how/6508>\
**Category:** Design\
**Created:** [October 16, 2014, 3:12pm UTC](https://discuss.emberjs.com/t/render-list-but-how/6508 "2014-10-16T15:12:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![liveactdk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/liveactdk/32/5813_2.png) [@liveactdk](https://discuss.emberjs.com/u/liveactdk)\
**Post date:** [October 16, 2014, 3:12pm UTC](https://discuss.emberjs.com/t/render-list-but-how/6508/1 "2014-10-16T15:12:21Z")

</div>

Hi

I’m relative new to ember, and I have hit at problem i can’t figure out.

In my app I have a ‘Create new event’ page, on that I have a datepicker field. What I would like, is to when the field is changed, it will load all events with the same date in a div beside it.

How should I start/build this, component for the list or? Can someone please help me, by pointing me in the right direction?

At this point my create route just looks:

```
 export default Ember.Route.extend({   
    model: function(){
	     return this.store.createRecord('event');
    },

```

---

<div class="post-metadata">

**Author:** ![liveactdk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/liveactdk/32/5813_2.png) [@liveactdk](https://discuss.emberjs.com/u/liveactdk)\
**Post date:** [October 16, 2014, 3:19pm UTC](https://discuss.emberjs.com/t/render-list-but-how/6508/2 "2014-10-16T15:19:15Z")

</div>

**The template**

```
<form {{action 'search' on="submit"}} >
  	<div class="field">
    {{date-picker date=eventDate valueFormat='DD-MM-YYYY' outputFormat='DD-MM-YYYY'}}
        <span class="helptext">Vælg datoen for eventen.</span>
</div>
    <div>
        {{input value=name placeholder="Name of event"}}
</div>
</form>

<div class="eventlist">
     #EVENTLIST HERE
</div>

```

---

<div class="post-metadata">

**Author:** ![splattne](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/splattne/32/3694_2.png) [@splattne](https://discuss.emberjs.com/u/splattne)\
**Post date:** [October 17, 2014, 11:52am UTC](https://discuss.emberjs.com/t/render-list-but-how/6508/3 "2014-10-17T11:52:40Z")

</div>

In order to render a list you’ll need a model (or sub-model) which is an array of objects. So, ideally your controller is an [ArrayController](http://emberjs.com/guides/controllers/representing-multiple-models-with-arraycontroller/).

Then you can render it using the `#each` block handlebars helper

```
{{#each event in model}}
    <h2>{{event.name}}</h2>
    <p>{{event.description}}</p>
{{/each}}

```

See: [http://emberjs.com/guides/templates/displaying-a-list-of-items/](http://emberjs.com/guides/templates/displaying-a-list-of-items/)

---

<div class="post-metadata">

**Author:** ![liveactdk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/liveactdk/32/5813_2.png) [@liveactdk](https://discuss.emberjs.com/u/liveactdk)\
**Post date:** [October 20, 2014, 8:27am UTC](https://discuss.emberjs.com/t/render-list-but-how/6508/4 "2014-10-20T08:27:28Z")

</div>

I know i have to use the #each tag, but my question is have to set up my controller or route, so when the user change the datefield the event-list will update based on the date.