作为一种学习Ember的方法,我试图构建一个简单的应用程序,现在没有教程的拐杖。
该应用将执行以下操作 -
我对如何使用Ember方式构建数据感到有些困惑。我该怎么做呢?
我正在思考 -会有一个index.handlebars - 这将为A人和B人城市提供2个输入字段 - 这将由会议'支持。模型(属性:cityA,cityB)
点击提交按钮后,这就是我感到困惑的地方 -
我可以想象有一个名为MeetingTime的模型(包含personA' s时间,以及personB' s时间)。
根据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>
答案 0 :(得分:0)
结束制作吧! www.24time.co
该代码可在www.github.com/stopachka/right-time
找到有一个名为Meeting的模型。
一个人通过与Places Autocomplete API交互来选择城市。当他们选择时,它返回附加到会议的latLng位置。一旦模型具有城市的两个位置,它就会向/ api / meeting发出ajax请求,发送位置参数。
API返回所有最佳时间。我很确定我没有采用这种方式,也许模型可以用不同的方式分解,时间可以是模型本身。