在'on'属性中进行amp-bind JS操作

时间:2018-11-12 16:31:24

标签: amp-html amp-bind

我想听一个事件(在这种情况下是变化的),并根据状态中存储的变量的值执行不同的操作。是否可以在expr '?' expr ':' expr属性中使用操作on

一个示例是here,其中值第一次更改(自动填充等于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 :(得分:2)

据我所知,不可能在on属性中写入这样的条件。该文档说明如下:

  

语法值是一种简单的特定于域的语言   形式:

     

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

作为一种解决方法,您可以对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标签,因为会有重复的ID。