Полимер: Могу ли я изменить содержимое ящика для бумаги?

Question

Здравствуйте, я хочу спросить, возможно ли изменить содержимое панелей ящиков бумаги, если я использую другую кнопку, чтобы открыть ящик. Мне просто нужно это сделать, чтобы страница, в которой ящик менял бы контент из некоторой настройки. У меня есть настройки, которые мне нужно сделать, но как создать это изменение контента?

Это панель ящика у меня сейчас:

<paper-drawer-panel class="indexz" id="paperDrawerPanel" force-narrow right-drawer> 
    <div drawer> 
     <h2 style="text-align:center ">Adjustments</h2> 
     <div class="togglebtn"> 
      Display search box<paper-toggle-button tabindex="0" id="searchcheck" name="searchcheck" class="red searchcheck" 
                onChange="resetradio(this)"></paper-toggle-button> 

      <div class="buttons"> 

       <label for="label3" class="text">Choose search engine</label> 
       <paper-radio-group allow-empty-selection aria-labelledby="label3"> 
        <paper-radio-button name="google" id="search" class="search" value="https://www.google.com/search" 
             onclick="formaction(this);setcheckbox()"><label for="search">Google</label> 
        </paper-radio-button> 
        <paper-radio-button name="seznam" id="search" class="search" value="https://search.seznam.cz/" 
             onclick="formaction(this);setcheckbox()"><label for="search">Seznam</label> 
        </paper-radio-button> 
        <paper-radio-button name="bing" id="search" class="search" value="https://www.bing.com/search" 
             onclick="formaction(this);setcheckbox()"><label for="search">Bing</label> 
        </paper-radio-button> 
       </paper-radio-group> 
      </div> 
     </div> 
     <br/> 
     <div class="togglebtn2"> 
      <paper-toggle-button tabindex="0" id="clock" name="showclock" class="red clockdis" 
           onChange="resetclock(this);"> 
       Clock 
       hide/show 
      </paper-toggle-button> 
      <div class="buttons2"> 
       <label for="label3" class="text">Choose Format</label> 
       <paper-radio-group allow-empty-selection aria-labelledby="label3"> 
        <paper-radio-button value="24" name="format" class="format" 
             onChange="setclock();setFormat(this.value)"> 
         24 Hours 
        </paper-radio-button> 
        <paper-radio-button value="12" name="format" class="format" 
             onChange="setclock();setFormat(this.value);setpos()">12 Hours 
        </paper-radio-button> 

       </paper-radio-group> 
      </div> 
     </div> 
     <div id="closebtn"> 
      <paper-button tabindex="0" icon="close" class="cls" paper-drawer-toggle>Close drawer</paper-button> 
     </div> 
    </div> 
    <div main> 
     <div> 

      <paper-icon-button icon="settings" class="drawerbtn" paper-drawer-toggle></paper-icon-button> 

     </div> 
    </div> 
</paper-drawer-panel> 

Спасибо за любую помощь.

Answer 1

Для достижения того, что вы хотите, вы можете использовать атрибут <template is="dom-if" if=""></template> или hidden, чтобы изменить содержимое ящика с привязанными данными свойствами.

Ящик будет выглядеть как этот

<paper-drawer-panel class="indexz" id="paperDrawerPanel" force-narrow right-drawer> 
    <div hidden$=[[typeTwo]]> 
     ... 
    </div> 
    <div hidden$=[[!typeTwo]]> 
     ... 
    </div> 
</paper-drawer-panel> 

или для версии dom-if

<paper-drawer-panel class="indexz" id="paperDrawerPanel" force-narrow right-drawer> 
    <template is="dom-if" if="[[typeTwo]]"> 
     ... 
    </template> 
    <template is="dom-if" if="[[!typeTwo]]"> 
     ... 
    </template> 
</paper-drawer-panel> 

Затем вы просто должны переключить typeTwo свойство от false к true или другим способом до того открывающимися ящик, чтобы изменить его содержимое. Здесь он изменит весь контент, но вы можете сделать то же самое с некоторыми подэлементами.

У вас может быть функция для каждой кнопки, которая сделает это.