Ember.js 컨트롤러 및보기 바인딩 (ember.js 방법 ...)

Question

이 질문의 길이에 대해 사과 하긴하지만 짧은 답변을 드릴 수 없습니다.

Ember.js를 배우려고합니다 & 컨트롤러 사이의 관계를 이해하는 데 약간의 문제가 있습니다. 특히 컨트롤러 속성 인 & 뷰 바인딩과 관련이 있습니다. 나는 이 작동하는 응용 프로그램을 가지고있다. ... 그러나 나는 왜 &이 참으로 이해가 안되는가? (오히려 분명히) 이것은 그것을 할 수있는 'Ember.js'방법이 아니라는 것을 느낀다.

고려해야 할 사항 :이 응용 프로그램은 가이드/문서에서 '올바른'구조로 해석 한 내용에 따라 디렉토리/파일로 분류됩니다.이 응용 프로그램은 sinatra 응용 프로그램의 컨텍스트에서 실행됩니다. 이 응용 프로그램은 불완전하지만 지금까지 예상대로 작동합니다.

응용 프로그램은 불완전하지만, 여기에 내가 내가 뭘하려고 오전 &을 기대의 일반적인 개요입니다

1) 사용자는 '/'루트 URL에 도착하고 '위치 /로 전환된다 'URL.

2) LocateController는 사용자 위치를 잡고 두 양식 필드를 위도/경도로 채 웁니다.

3) 양식은 POST로 sinatra '/ locate'경로로 아약스로 제출됩니다.

(요청이 서버에 의해 처리된다)

4) 사용자가 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의에 REPO에 모습을 읽었습니다. 나는 '올바른'구현이 위도 & 경도 속성에 대해 계산 된 속성을 사용하지만 실제로 어떻게 작동하는지 이해하지 못한다고 생각합니다.

또한 정보를 서버로 가져 오는 것을 처리 할 수있는 더 좋은 방법이 있다는 것을 알고 있습니다. (JSON 또는 ember- 데이터로 생각하면됩니까?) 그리고 어떤 통찰력이라도 자유롭게 공유 할 수 있습니다. 그것에 관해서. 그러나 지금은 sinatra에 익숙하고 어떻게 작동하는지에 관해서는 백엔드의 주요 리팩토링을 필요로하지 않는 솔루션을 선호합니다. (즉, sinatra의 params [: hash]에서 위치 데이터에 액세스 할 수 있음).

도와 주셔서 감사합니다. & 다소 긴 질문을 읽어 주셔서 감사합니다.

Answer 1

엠버 애플 리케이션에서 jQuery를 통해 입력 값을 설정하는 것은 방법이 아닙니다. 엠버는 속성에 구속력이 있습니다. 초기로드시 경로 찾기로 리디렉션 했으므로 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 인스턴스에 설정할 수도 있습니다. 그런 다음 바인딩이 '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); 
    } 
});