ember.js에 "조건부"뒤로 버튼 구현

Question

ember.js (버전 1.2) 기반 모바일 응용 프로그램에서 작업 중이며 전역 메뉴 토글/뒤로 버튼 패턴을 구현하는 데 가장 관용적 인 방법을 찾고 있습니다. 많은 모바일 앱에서 일반적입니다. 특히 사용자가 앱의 집/색인보기에있을 때 숨겨진 서랍 기본 메뉴를 토글하는 고정 된 상단 도구 모음의 왼쪽에있는 버튼이지만 하위 경로로 이동하면 버튼에 뒤로 화살표를 클릭하면 이전에 본 경로로 돌아갑니다 (이전 기록 상태가 없으면 색인 경로로 돌아갑니다. 즉, 사용자가 응용 프로그램을로드 할 때 하위 경로를 직접 방문한 경우).

Fyi, 현재 내 응용 프로그램은 고정 된 상단 도구 모음과 메뉴 토글/루트 응용 프로그램 템플릿의 뒤로 단추로 구성되어 있습니다. 이상적으로이 기능은 transitionTo() 또는 {{#link-to}} 도우미 등을 통해 경로가 전환되는 방식에 관계없이 작동합니다.

본질적으로 Ember가 내부적으로 앱의 평생 동안 어떤 경로로 전환했는지에 대한 액세스 가능 기록/로그를 내부적으로 유지하고 있는지, 그리고 상황에 따라 행동을 조건부로 변경하는 최선의 방법이 무엇인지 알고 싶습니다. 현재의 경로에 따라 토글/백 버튼이 수행하고 그 아이콘 (또는 아이콘)을 표시합니다. 그리고/또는 필요하다면 그 역사를 직접 구현할 수 있도록 엠버의 경로 변경 이벤트를 듣는 방법이 있습니까?

Answer 1

나는 나쁜 소식을 전하는 사람이되기 싫지만, 너를 교수형에 두는 것을 싫어한다.

Ember는 기록을 추적하지 않으므로 일반적으로 사용하지 않습니다 (특히 브라우저가 추적하기 때문에).

다행히도 응용 프로그램 컨트롤러의 경로 변경을 모니터링 할 수 있습니다.이 기능을 사용하면 시작해야합니다. (참고로 완벽하게 작동하는 멋진 솔루션을 만드는 데는 시간을 들일 필요가 없습니다. '당신은 당신을 위해 잘 작동 워크 플로우)

http://emberjs.jsbin.com/IZAZemEP/1/edit

App.ApplicationController = Em.Controller.extend({ 
    history: [], 

    hasHistory: function(){ 
    return this.get('history.length')>1; 
    }.property('history.length'), 

    watchHistory: function(){ 
    this.get('history').pushObject(this.get('currentPath')); 
    }.observes('currentPath'), 

    actions: { 
    goBack: function(){ 
     // implement your own history popping that actually works ;) 
     if(this.get('hasHistory')){ 
     this.get('history').popObject(); 
     window.history.back(); 
     this.get('history').popObject(); // get rid of route change here, don't need it 
     } 
    } 
    } 
});