Render list, but how?

Design
1

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');
    },
2

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>
3

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.

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/

4

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.