Как найти элемент во вложенном шаблоне

Полимерный элемент определяется следующим образом:

<polymer-element name="my-element">
    <template>
       <template if="{{show==true}}">
           <div on-click="{{hideMe}}"> click to hide my div </div>
           <div id="mydiv">
               my div content here
           </div>
       </template>
     </template>
 </polymer-element>

И код Dart выглядит следующим образом:

@CustomTag('my-element')
@observable bool show = true;

 hideMe(){
    Element e = $['mydiv'];
    e.hidden = true;
 }

Код не работает, так как $['mydiv'] возвращает значение null. Как найти элемент во вложенном шаблоне в полимерном компоненте Dart?


dart dart-polymer
person Tusshu    schedule 12.02.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Почему вы хотите это сделать? <template if удаляет узлы из DOM, когда show == false. Все, что вам нужно сделать, это

В HTML

`on-click='{{hide}}'`

В Дарте

void hide() {
  show = false;
}

Если вы не хотите скрывать <div on-click='...>, переместите его за пределы <template if=...>

Подсказка: если ваше поле show имеет тип bool, вы можете упростить его до

 <template if="{{show}}">
person Günter Zöchbauer    schedule 12.02.2014
comment
‹template if=...› содержит несколько элементов DIV. Каждый DIV отображает свое содержимое. Пользователь нажимает на div, чтобы скрыть (или показать) его содержимое, чтобы ему не приходилось прокручивать страницу. - person Tusshu; 12.02.2014
comment
Я бы справился с этим и с (вложенным) <template if=...>. Удерживайте текущее состояние каждого узла в вашей модели, и вы можете легко сделать переключатель (показать/скрыть) для каждого узла, просто изменив состояние. - person Günter Zöchbauer; 12.02.2014
comment
Большое спасибо за ваше предложение. Оно работает. Я пытался не писать код манипулирования View (html) в моем контроллере (код дротика), а просто установить переменную модели (show) и позволить просмотру обрабатывать логику, связанную с пользовательским интерфейсом. Спасибо за ваш быстрый ответ. - person Tusshu; 12.02.2014

arrow_upward
1
arrow_downward

Да, $['id'] похоже не работает с вложенными шаблонами. Но есть и более подробный способ, который работает.

Element e = this.shadowRoot.querySelector("#mydiv");
person MarioP    schedule 12.02.2014