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