How do I structure a Timezone Checking App in Ember

Question

As a way to learn Ember, I'm trying to build a simple app, now without the crutches of a tutorial.

The app will do the following --

• User writes his own city
• User writes the city of person he wants to meet
• Function will spit back up all the times that are mutually good for eachother. I.e times where neither of them will have to wake up too early to stay too late)

I'm a bit confused as to how to structure the data the Ember way. How would I go about it?

I'm thinking --

There will be an index.handlebars - This will have the 2 input fields for both person A and person B's cities - This will be backed by the 'Meeting' Model(attributes : cityA, cityB)

When the submit button is clicked, this is where I get confused --

I can imagine that there is a model called MeetingTime (with personA's time, and personB's time).

In what way would I present that, following Ember's best practices? What routes, controllers, templates etc?

---

Currently, this is what I have ->

RightTime.Router.reopen({
  location: 'history'
});

RightTime.Meeting = DS.Model.extend({
  myCity: DS.attr('string'),
  theirCity: DS.attr('string'),

  meetingTimes: function() {
    if (myCity && theirCity) {
      // get back a collection of meeting times
    }

    return false;
  }.property('myCity','theirCity')
});

RightTime.IndexRoute = Ember.Route.extend({
  model: function() {
    //return this.store.createRecord('meeting');
    //the above return is giving the error 'unedfined is not a function'
  }
});

#index.handlebars
<div class="container">
  <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
    <header class="animated fadeInDown">
        <h1><span class="twenty-four-header">24</span>Time</h1>
        <h3>Get Great Meeting Times Instantly</h3>
    </header>
    <section class="main-options animated fadeInDown">
      <div class="form-group">
        {{input value=myCity placeholder="What's your city?" class="form-control input-lg"}}
      </div>
      <div class="form-group">
        {{input value=theirCity placeholder="What their city?" class="form-control input-lg"}}
      </div>
      <div class="form-group">
        <button {{action 'getTimes'}} class="btn btn-lg get-times btn-block btn-primary">Get Times!</button>
      </div>
    </section>
  </div>
</div>

Answer 1

Ended up making it! www.24time.co

The code can be found at www.github.com/stopachka/right-time

There's one model called Meeting.

A person chooses a city by interacting with the Places Autocomplete API. When they choose, it returns latLng positions, which are attached to the meeting. As soon as the model has both positions for the cities, it makes an ajax request to /api/meeting, sending the location parameters.

The API returns back all the best times. I'm pretty sure I'm not doing it the ember way though, perhaps the model can be broken down differently, and the times can be models themselves.