'on' 属性内的 amp-bind JS 操作

Question

我想监听一个事件（在本例中为更改）并根据存储在状态中的变量值执行不同的操作。是否可以在 on 属性中使用操作 expr '?' expr ':' expr？

一个例子是 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}})">

Answer 1

据我所知，在on属性中写这样的条件是不可能的。文档说明如下：

The value for the syntax is a simple domain-specific language of the form:

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

作为一种变通方法，您可以对 on 属性使用具有不同操作的重复 select 标记，并通过使用 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' })">

并定义class隐藏如下：

.hide{
  display:none;
}

这里的一个缺点是您不能将 id 分配给 select 标签，因为会有重复的 ID。

'on' 属性内的 amp-bind JS 操作

amp-bind JS operation inside 'on' attribute

amp-html

amp-bind