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

我为这个问题的长度道歉，但我缺乏洞察力，无法把它缩短

我正在努力学习Ember.js&我在理解控制器和它的视图之间的关系时遇到了一些困难。特别是当它与控制器属性和视图绑定相关时。我有一个小的应用程序可以工作。。。但我真的不明白为什么&我觉得（相当明显）这不是‘Ember.js’的方式

需要考虑的一些事情：根据我在指南/文档中解释为“正确”结构的内容，此应用程序分为目录/文件，此应用程序在sinatra应用程序的上下文中运行。这个应用程序虽然不完整，但到目前为止，它的工作方式与我预期的一样

该应用程序不完整，但以下是我的期望和尝试的概述：

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

2） LocateController获取用户位置，用lat/lng填充两个表单字段

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

（请求由服务器处理）

4） 用户被转换到ember.js“#/located”路径

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

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

使用表单字段的正确值填充“定位”视图中的字段。但是，我正在使用straight jQuery来更新值，在我看来，在ember.js应用程序中这样做并不是“正确的”方式

下面是我的一些代码。为了简洁起见，我只提供一些片段，我觉得如果你知道正确的答案，你将能够从提供的摘录中得到它

我的观点如下： 我在我的sinatra应用程序中使用slim

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

路由器.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数据，当我到达这一步时？），请随意分享您对此的任何见解。但就目前而言，由于我对sinatra及其工作方式感到满意，我更喜欢一个不需要对后端进行重大重构的解决方案。（也就是说，能够从sinatra的params[：hash]访问位置数据）

---

提前感谢您的帮助&花时间阅读这个相当长的问题。

我同意在ember应用程序中通过jQuery设置输入值不是一个好办法。Ember在绑定到属性方面做得非常好。 我建议，由于您重定向以在初始加载时定位路由，请将getLoaction逻辑移动到LocateController，或将其设置在route 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.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);
  }
});

---

我同意在一个ember应用程序中通过jQuery设置输入值不是一个好办法。Ember在绑定到属性方面做得非常好。 我建议，由于您重定向以在初始加载时定位路由，请将getLoaction逻辑移动到LocateController，或将其设置在route 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.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);
  }
});

---

这正是我要找的！非常感谢你！我知道straight jQuery不是答案，所以我假设这意味着用straight jQuery作为ajax发送表单也不是答案。在余烬有处理该案件的程序吗？一些如此简单且依赖实例的东西似乎也应该存在于我的路由或控制器中？或者这就是我应该开始考虑开发一些模型的要点吗？看起来我可能说得太快了=/我确实认为你的解决方案似乎是正确的。但是，将您的代码添加到我的应用程序中并注释掉我的地理位置jQuery位会留下空文本字段。@DonGraziano是的，您会使用操作（）提交表单。@DonGraziano您能提供一个简单的JSFIDLE或jsBin吗？这正是我要找的！非常感谢你！我知道straight jQuery不是答案，所以我假设这意味着用straight jQuery作为ajax发送表单也不是答案。在余烬有处理该案件的程序吗？一些如此简单且依赖实例的东西似乎也应该存在于我的路由或控制器中？或者这是我应该开始考虑开发一些模型的时候吗？看起来我可能有一些问题