다트의 web_ui에서 "컨트롤러"를 어떻게 구성합니까?

나는 현재 렌더링 다른 내에서 이벤트 처리 코드를 다음 코드다트의 web_ui에서 "컨트롤러"를 어떻게 구성합니까?

xviewcontainer.html

<!DOCTYPE html> 

<html> 
    <head> 
    <title>xviewcontainer</title> 
    <link rel="components" href="xsearch.html"> 
    <link rel="components" href="xcard.html"> 
    </head> 

    <body> 
    <element name="x-view-container" constructor="ViewContainerComponent" extends="div"> 
     <template> 
     <template instantiate="if view == 'SEARCH_VIEW'"> 
      <x-search></x-search> 
     </template> 
     <template instantiate="if view == 'CARD_VIEW'"> 
      <x-card></x-card> 
     </template> 
     </template> 
    </element> 
    <script type="application/dart" src="xviewcontainer.dart"></script> 
    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' --> 
    <script src="packages/browser/dart.js"></script> 
    </body> 
</html>

xviewcontainer.dart

import 'package:web_ui/web_ui.dart'; 

class ViewContainerComponent extends WebComponent { 
    String view = 'SEARCH_VIEW'; 
}

을 가지고있다 하위 구성 요소 t는 x-search입니다. 포함 된 x-view-container 인스턴스에 대한 참조를 얻으려면 어떻게해야합니까? .view 속성을 변경하여 x-view-container이 현재 렌더링 된 x-search 대신에 x-card을 렌더링하도록합니다. 나는 내 이벤트 핸들러의 상대적 위치, 절대적인 방식으로 그것을 수행하는 방법, 다른 방법으로 그렇게하는 방법에 대해 특별히 관심을 가질 것이다.

void openCardView(){ 
    WHAT_DO_I_PUT_HERE.view = 'CARD_VIEW'; 
    }

출처

2013-03-20 Stephen Cagle

당신은 당신이 query() 메소드를 사용하여 DOM에있는 요소에 대해 조회 할 수 있습니다. 가장 간단한 예는 query('x-view-container')입니다. 또는 그것에 클래스 나 ID를 할당하고 그것에 대해 질의합니다. 그런 다음 xtag 속성에 액세스하여 실제 웹 구성 요소 인스턴스를 가져옵니다.

import 'package:web_ui/watcher.dart' as watchers; 

main() { 
    // I'm assuming that the HTML tag is somewhere on the page. 
    query('x-view-container').xtag.view = 'CARD_VIEW'; 

    watchers.dispatch(); // You may need to call this, or use @observable stuff. 
}

: 여기

은 예입니다

출처

2013-03-20 12:56:15

다트의 web_ui에서 "컨트롤러"를 어떻게 구성합니까?

답변

관련 문제