Ember.js DOM에서보기를 추가하고 제거 하시겠습니까?

Question

이전에 SproutCore 1을 사용한 후에 ember.js를 조사했습니다. 사용자가 응용 프로그램을 탐색 할 때 DOM에서보기를 추가하고 제거하는 방법에 대한 몇 가지 예를 찾고 있습니다.

예를 들어, 일련의 사례가 포함되어 있고 각 사례마다 워크 플로가 있습니다. 관리 페이지 등도 있습니다.

사용자가 응용 프로그램을 시작하면 대시 보드와 유사한 사용자 인터페이스가 표시됩니다. 여기에서 사용자는 사례를 검색하거나 클릭하여 사례를 제기 할 수 있습니다. 이 시점에서 나는 다음을 수행 할 :

• 내가 대시 보드에 대한 GUI를 제거 할, 그리고 난 경우의 GUI 표시 할 - 탐색 자체적 자체에 복잡한 GUI입니다 규칙 등.
• 또한 사용자가 탐색하고 대소 문자를 조작 할 때 GUI의 일부를 추가하고 제거하려고합니다.
• 사용자가 "대시 보드"링크를 클릭하면 현재 GUI가 제거되고 대시 보드가 다시 추가되기를 원합니다.

이것은 다소 큰 응용 프로그램이므로 isVisible 매개 변수를 토글하는 것이 충분한 지 또는 사용자의 브라우저에 과부하가 걸리지 않도록 다른 조치를 취해야하는지 잘 모르겠습니다.

가이드 또는이 방법을 보여주는 예제가 있습니까?

Answer 1

경고 : 오래된 답

뷰는 몇 가지 중요한 방법을 얻는 것을 의미 Ember.View에서 상속됩니다. append()은 body에, appendTo(arg)에는 인수가 있고 remove()이 붙습니다.

인자는 DOM에 요소를 삽입 할 위치의 jQuery 스타일 선택자입니다.

// my view 
App.PartsView = Ember.View.extend({ 
    ... 
}); 


// create/insert my view 
App.partsView = App.PartsView.create(); 
App.partsView.appendTo('#partcontainer'); 

내 코드에는 <div id="partcontainer"></div>이 있습니다.

// remove from DOM 
App.partsView.remove(); 

문서는 Building a View Hierarchy에 좋은 부분과 프로그래밍 방식 여부 모든 것을 할 것인지 여부에 따라 Ember.ContainerView에 나중에 섹션이 있습니다.