표준 메뉴 바/세부 정보 페이지의 백본보기 디자인 모바일 UI

Question

모바일 웹 앱을 제작하고 있으며 내 백본보기의 디자인과 배선에 어려움을 겪고 있습니다.

달성하고자하는 것을 설명해 드리겠습니다. 당신이 볼 수 있듯이

는

이미지는 위의 몇 가지 UI 구성 요소를 식별 : 다시와

• 도구 모음보기, 검색 및 메뉴 버튼 목록과
• 탭보기를
• 자세히보기
• 메뉴보기

동작에 대한 몇 가지 참고 사항 :

• 메뉴 단추를 누르면 메뉴가 오버레이되고 애니메이션이 적용됩니다.
• 목록 및 세부 뷰는 도구 모음, 메뉴, 목록 및 세부 사항에 대한 지금 내가 만든 뷰에 대한 해시 태그

에 영구적으로 액세스 할 수 있습니다. 그러나 분명히보기들 사이에 약간의 상호 작용이 있어야하고 나는 그것을 다루는 방법을 모르겠습니다.

문제 해결 :

1. 세부 사항 또는 목록에 갈 때 나는 모든 뷰를 렌더링합니까? 그렇지 않은 경우 도구 모음을 업데이트하고 해당 관계를 처리하는 방법
2. 말하기 탭 2에서 세부 사항으로 이동하여 목록으로 돌아갈 때 표시된 탭을 기억하는 방법. 탭 사이의 전환 만 기억하면 안되기 때문에 해시 태그가있는 보이는 탭을 기억하는 것은 옵션이 아닙니다.

나는 tbranyen layoutmanager을 조사해 왔지만 여전히 완전한 격리 된보기를 가정합니다.

Answer 1

나는 이런 종류의 일에 Backbone.Marionette을 사용하여 약간의 성공을 거두었습니다. 이를 통해 응용 프로그램에서 영역을 정의한 다음 해당 영역에 표시되는보기를 독립적으로 관리 할 수 ​​있습니다.

그래서 도구 모음은 영역이되며 주 영역은 영역이됩니다. 그런 다음 목록과 세부 사항을 전환 할 때 툴바 영역 만 남겨두고 목록/세부 정보보기를 주 영역에 삽입하면됩니다. Backbone Marionette은 올바른 뷰가 렌더링되고 DOM 등에서 요소가 제거되었는지 확인합니다.

보이는 탭이 무엇인지 기억하기 때문에 탭보기의 변수에 저장할 수 있습니까? 아니면 어떤 최상위 응용 프로그램 개체에?