Операция amp-bind JS внутри атрибута 'on' - PullRequest
Новая
       23

Операция amp-bind JS внутри атрибута 'on'

0 голосов
/ 12 ноября 2018

Я хочу прослушать событие (при изменении, в данном случае) и выполнить различные действия в зависимости от значения переменной, хранящейся в состоянии.Можно ли использовать операцию expr '?' expr ':' expr в атрибуте on?

Например, здесь , где при первом изменении значения (автозаполнение равно 0) я сделаюдействие, но в остальное время (автозаполнения> 0) другое.Я никогда не видел это на практике, поэтому я не знаю, в какой момент это возможно.Я попробовал следующие два способа.

Спасибо! 

<select name="tamanho" id="tamanho" on="selection.autofill == 0 ?
change:AMP.setState({selection: {Tamanho: event.value,
                                 Impressao: 'Verde$ Rojo',
                                 autofill: order.autofill+1}}) :
change:AMP.setState({selection: {Tamanho: event.value}})">

<select name="tamanho" id="tamanho" on="change:AMP.setState(
selection.autofill == 0 ? {selection: {Tamanho: event.value,
                                        Impressao: 'Verde$ Rojo',
                                        autofill: order.autofill+1}} :
                          {selection: {Tamanho: event.value}})">

1 Ответ

0 голосов
/ 13 ноября 2018

Насколько я знаю, невозможно написать такие условия внутри атрибута on.Документация гласит следующее:

Значением синтаксиса является простой предметно-ориентированный язык в форме:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

AsВ качестве обходного пути вы можете использовать дубликаты тегов select с различными действиями для атрибута on и условно отображать только один из них за раз, применяя ваше условие с помощью amp-bind.Например: 

<select name="tamanho" 
        [class]="selection.autofill == 0 ? 'hide' : '' " 
        on="change:AMP.setState({ selection : 'ABCD' })">

<select name="tamanho"
        class="hide"
        [class]="selection.autofill == 0 ? '' : 'hide' " 
        on="change:AMP.setState({ selection : 'WXYZ' })">

и определите скрытие класса следующим образом: 

.hide{
  display:none;
}

Единственный недостаток здесь заключается в том, что вы не можете назначить id тегам select, поскольку тамбудут дубликаты идентификаторов.

...