다트 언어 : Polymer -보기 작업

Question

Dart에서 처음으로 "복잡한"응용 프로그램을 개발하고 있는데, 하나 이상의보기로 작업하는 방법에 문제가 있습니다 (응용 프로그램을 개발하여 단일 페이지).

우선,이 (Polymer 사용)은 응용 프로그램의 다양한보기 (또는 "응용 프로그램 화면")를 사용하는 올바른 방법이라고 가정합니다. 그러나, 그렇지 않다면 나는 (물론) 알고 싶습니다. 그리고 "앱 화면"에 의해, 나는 자바로 다양한 형태를 만드는 것과 같은 것을 말하고있다.

예를 들어 페이지 맨 위에 두 개의 버튼이 있습니다. 첫 번째를 클릭하면 사용자 등록 영역이있는보기가 표시됩니다. 두 번째 단추를 클릭하면 편집 가능한 눈금이있는보기가 표시됩니다.

이 간단한 응용 프로그램에 대한 몇 가지 코드 예제를 제공해 주시겠습니까?

Answer 1

당신은 template if 기능을 사용할 수 있습니다.
현재 활성 상태가 아닌보기는 DOM에서 자동으로 제거되고 모델 속성이 변경되면 자동으로 다시 삽입됩니다.

<polymer-element name='app-element'> 
    <template> 
    <template if='{{appModel.view == 'view1'}}'> 
     <view1></view1> 
    </template> 

    <template if='{{appModel.view == 'view2'}}'> 
     <view2></view2> 
    </template> 
    </template> 
    <script ...> 
</polymer-element> 

Answer 2

네이티브 요소와 마찬가지로 폴리머 요소에 CSS 스타일 속성을 사용할 수 있습니다.

당신은 다음과 같이 조회 할 수 있습니다를 표시/숨기기 다음

Element e = querySelector('my-form'); 

과 : 후

e.style.display = 'none'; 
e.style.display = 'block'; 

당신이 초기화 폴리머, 당신은 (존재하는 경우) 요소의 클래스를 사용할 수 있습니다 (!) :

그런 다음 필요에 따라 클래스 속성을 설정하거나 스타일 속성을 사용할 수 있습니다. e 클래스는 HtmlElement에서 상속합니다.

클래스를 사용할 수도 있습니다. 다트는 약간의 "전환"기능과 함께 제공 :

element.classes.toggle('hidden'); 
element.classes.toggle('shown'); 

안부, 로버트