Ember.js控制器和视图绑定（ember.js方式…）

Question

对于这个问题的长度，我深表歉意，但我缺乏使它简短的见识。

我正在尝试学习Ember.js，并且在理解它所查看的控制器之间的关系时遇到了一些麻烦。 特别是与控制器属性和视图绑定有关。 我有一个可以正常工作的应用程序。。。但是我真的不明白为什么，我（显然）不是“ Ember.js”方法。

需要考虑的一些事情：根据我在指南/文档中解释为“正确”的结构，此应用程序分为目录/文件，该应用程序在sinatra应用程序的上下文中运行。 该应用程序虽然不完整，但确实可以达到我期望的方式。

该应用程序是不完整的，但是这里是我期望和我想做的事情的一般概述：

1）用户到达根URL“ /”，并转换为“ / locate” URL。

2）LocateController抓住用户位置，用lat / lng填充两个表单字段。

3）表单以ajax的形式提交到sinatra'/ locate'路由的POST到服务器。

（请求由服务器处理）

4）用户被转换到ember.js的“＃/ located”路由。

5）信息作为JSON对象从服务器返回并显示

到目前为止，我只执行了第一步。 如果我添加了一个提交按钮，则可以发送该表单，但想法是使其自动发生。

在定位视图中的字段将使用表单字段的正确值填充。 但是，我正在使用简单的jQuery更新值，对我来说，这似乎不是在ember.js应用中执行此操作的“正确”方法

这是我的一些代码。 为了简洁起见，我只提供摘要，就像您知道正确的答案一样，您可以从提供的摘录中得出摘要。

我的视图设置如下： 我在sinatra应用中使用了slim

script type="text/x-handlebars" data-template-name="application"
    | {{ outlet }}
script type="text/x-handlebars" data-template-name="locate"
    | {{ message }}
    | <form id="coordinates">
    |     {{view Ember.TextField id="latitude" name="latitude" valueBinding="latitude" class="latitude"}}
    |     {{view Ember.TextField id="longitude" name="longitude" valueBinding="longitude" class="longitude"}}
    | </form>
 script type="text/x-handlebars" data-template-name="located"
    | <p id="message">{{ message }}</p>
    | <p id="latitude">{{ latitude }}</p>
    | <p id="longitude">{{ longitude }}</p>

脚本src =“ assets / js / app / application.js”

applicationView.js

Application.ApplicationView = Ember.View.extend({
  templateName: 'application'
});

Application.LocateView = ApplicationView.extend({
  templateName: 'locate'
});

Application.LocatedView = ApplicationView.extend({
  templateName: 'located'
});

applicationController.js

var GeoLocation;

GeoLocation = (function(location){
    $('#latitude').val(location.coords.latitude),
    $('#longitude').val(location.coords.longitude)
});

navigator.geolocation.getCurrentPosition(GeoLocation)

Application.ApplicationController = Ember.Controller.extend({
  message: "Hello from Application"
});

Application.LocateController = Ember.Controller.extend({
    message: "Hello from Locate",
    latitude: "-- lat --", 
    longitude: "-- lng --",
});

Application.LocatedController = Ember.Controller.extend({
    message: "Hello from Located",
    latitude: "-- lat --",
    longitude: "-- lng --",
});

router.js

Application.Router.map(function() {
  this.route('index');
  this.route('locate');
  this.route('located');
});

Application.ApplicationRoute = Ember.Route.extend({
  events: {
    goToLocate: function() {
      this.transitionTo('locate');
    },
    goToLocated: function() {
      this.transitionTo('located');
    }
  }
});

Application.IndexRoute = Ember.Route.extend({
  redirect: function() {
        this.render('application');
    this.transitionTo('locate');
  }
});

Application.LocateRoute = Ember.Route.extend({
  redirect: function() {
        this.render('locate');
    //this.transitionTo('located');
  }
});

});

Application.LocatedRoute = Ember.Route.extend({
  renderTemplate: function(controller) {
    this.render('located');
  }
});

我已经阅读了ember.js网站上的指南和API文档，并查看了GitHub上的回购协议。 我觉得“正确”的实现将对纬度和经度属性使用计算的属性，但是我不太了解它在实践中是如何工作的。

另外，我知道，最有可能有一种更好的方法来处理将信息传送到服务器的问题（可能是到达目的地时可能是JSON或ember-data？），并随时分享您对此的任何见解。 但是就目前而言，由于我对sinatra及其工作方式感到满意，因此我希望使用一种不需要对后端进行重大重构的解决方案。 （也就是说，能够从sinatra的params [：hash]中访问位置数据）。

在此先感谢您的帮助，并抽出宝贵的时间阅读此较长的问题。

Answer 1

我确实同意，在余烬应用程序中通过jQuery设置输入值不是可行的方法。 Ember在绑定属性方面确实做得很好。 我建议，由于您在初始加载时重定向到定位路由，请将getLoaction逻辑移至LocateController或将其设置在路由setupController挂钩中（请参阅此处（关于setupController的示例）） ...您也可以在自己的服务器上设置此属性应用实例，如果您想访问它们。

因此，代替此：

var GeoLocation;

GeoLocation = (function(location){
    $('#latitude').val(location.coords.latitude),
    $('#longitude').val(location.coords.longitude)
});

navigator.geolocation.getCurrentPosition(GeoLocation)

我会在路线上这样做：

App.LocateRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    navigator.geolocation.getCurrentPosition(controller.geoLocation)
  }
});

App.LocateController = Ember.Controller.extend({
  geoLocation: function(location){
    this.set('latitude', location.coords.latitude);
    this.set('longitude', location.coords.longitude);
  }
});

现在，您的“定位”控制器已定义了两个属性“纬度”和“经度”。 您可以在模板中绑定它们。 （顺便说一句，您的模板对于绑定而言已经看起来正确。）

您还可以在您的App实例上设置此属性，如果您想全局访问它们，则更改绑定以指向“ App.longitude”和“ App.latitude”。

App.LocateController = Ember.Controller.extend({
  geoLocation: function(location){
    Ember.set(App, 'latitude', location.coords.latitude);
    Ember.set(App, 'longitude', location.coords.longitude);
  }
});