我如何在烬构造一个时区检查应用程序

How do I structure a Timezone Checking App in Ember

本文关键字：一个 时区 应用程序 检查      更新时间：2023-09-26

作为学习Ember的一种方式，我正在尝试构建一个简单的应用程序，现在没有教程的拐杖。

应用程序将执行以下操作——

  • 用户写自己的城市
  • 用户写下他想见的人所在的城市
  • 函数会把所有对彼此有利的时间吐出来。也就是说，他们两个都不必起得太早，也不必呆得太晚)

我对如何以Ember的方式构建数据有点困惑。我该怎么做呢?

我在想——

将有一个索引。handlebars-这将有两个输入字段的人A和人B的城市-这将由"会议"模型(属性:cityA, cityB)支持

当提交按钮被点击时，这就是我困惑的地方——

我可以想象有一个名为MeetingTime的模型(包含personA的时间和personB的时间)。

按照Ember的最佳实践，我该如何表现呢?什么路由，控制器，模板等等?

目前，这是我的->

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>

最终成功了!www.24time.co

代码可在www.github.com/stopachka/right-time

找到。

有一个模型叫Meeting。

一个人通过与Places Autocomplete API交互来选择城市。当他们选择时，它返回附加到会议的延迟位置。一旦模型有了这两个城市的位置，它就会向/api/meeting发出ajax请求，发送位置参数。

API返回所有最好的时间。我很确定我不是在用余烬的方式，也许模型可以被不同地分解，时间可以成为模型本身。

相关文章：