Ember.js Controller & View Binding (the ember.js way ...)

Question

Прошу прощения за длину этого вопроса, но мне не хватает проницательности, чтобы сделать его коротким.

Я пытаюсь изучить Ember.js & У меня возникли проблемы с пониманием взаимосвязи между контроллером, который он видит. В частности, поскольку это относится к свойствам контроллера & вид привязок. У меня есть небольшое приложение, которое работает ... Но я не совсем понимаю, почему & Я чувствую, что (довольно очевидно) это не способ «Ember.js».

Некоторые вещи, которые необходимо учитывать: это приложение разбито в директорию/файлы в соответствии с тем, что я интерпретировал в руководствах/документации как «правильную» структуру. Это приложение работает в контексте приложения синатра. Это приложение, хотя и неполное, работает так, как я ожидаю.

приложение является неполным, но вот общий обзор того, что я ожидаю &, что я пытаюсь сделать:

1) Пользователь приходит в корневой URL «/» и переход к «/ местонахождение 'URL.

2) LocateController захватывает местоположение пользователей, заполняет два поля формы с помощью lat/lng.

3) Форма отправляется на сервер как POST на маршрут sinatra/locate как ajax.

(запрос обрабатывается сервером)

4) Пользователь перешел на '# /, расположенной' The ember.js маршрута.

5) Информация поступает от сервера в виде объекта JSON & отображается

Я до сих пор реализован только шаг один. Форма может быть отправлена, если я добавлю кнопку отправки, но идея состоит в том, чтобы это произошло автоматически.

Поля в виде локации заполняются правильными значениями полей формы. Тем не менее, я использую прямое jQuery для обновления значений, и мне кажется, что это не «правильный» способ сделать это в приложении ember.js.

Здесь следует некоторый код. Для краткости я просто предоставил фрагменты, как мне кажется, если вы знаете правильный ответ, вы сможете получить его из предоставленных выдержек.

Мои взгляды настроены так: Я использую тонкий в моем Синатра приложение

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 = "активы/JS/приложение/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'); 
    } 
}); 

Я прочитал Руководства & Документация по API на сайте ember.js, а также смотрели на репо на GitHub. Я чувствую, что «правильная» реализация использовала бы рассчитанные свойства для атрибутов долготы широты &, но я не совсем понимаю, как это работает на практике.

Кроме того, я знаю, что, скорее всего, лучший способ справиться с получением информации на сервере (возможно, как JSON или ember-data, когда я получаю так далеко?), И не стесняйтесь делиться информацией, которую вы можете есть относительно это. Но на данный момент, поскольку мне комфортно с синатрой и как это работает, я бы предпочел решение, которое еще не требует серьезного рефакторинга моего бэкэнда. (т. е. иметь возможность доступа к данным местоположения из параметров sinatra [: hash]).

Заранее благодарим за помощь & Не торопитесь, чтобы прочитать этот довольно длинный вопрос.

Answer 1

Я согласен с тем, что установка значения ввода через jQuery в приложении ember - это не путь. Эмбер отлично справляется с привязкой к свойствам. Я бы предположил, что, поскольку вы перенаправляетесь на поиск маршрута при начальной загрузке, переместите логику getLoaction в LocateController или установите его внутри маршрута setupController hook см. Здесь (see here for setupController example) ... Вы также можете установить свойства в своем экземпляре приложения, если вы хотел иметь к ним доступ.

Таким образом, вместо этого:

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

Теперь ваш Расположить контроллер имеет 2 свойства 'широта' и 'долгота' определена. Вы можете привязать их к шаблону. (BTW, ваш шаблон уже выглядит правильно для привязки.)

Вы также можете установить свойства этого в своем экземпляре приложения, если вы хотите иметь доступ к ним по всему миру, а затем изменить привязки, чтобы указать на «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); 
    } 
});