2013-03-20 1 views
0

я следующий кодКак создать «Контроллер» в веб-сайте Дарта?

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'; 
} 

У меня есть код обработки в какой-либо другой в настоящее время вынесено событие суб-Componen т x-search. Как получить ссылку на содержащий x-view-container экземпляр? Я хочу изменить свойство .view так, чтобы x-view-container выдаст x-card вместо текущего рендеринга x-search. Мне было бы особенно интересно, как это сделать из относительного положения обработчиков событий, как сделать это в абсолютном порядке, а также как это сделать любым другим способом.

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

ответ

2

Вы можете запросить элемента у вас есть на DOM с query() методом. Самый простой пример: query('x-view-container'). Или назначьте класс или идентификатор на нем и попросите об этом. Затем перейдите в свойство 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. 
}