时间戳

首页 > 解决方案 > 'on' 属性内的 amp-bind JS 操作

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

问题描述

我想监听一个事件（在这种情况下是变化）并根据存储在状态中的变量的值执行不同的操作。是否可以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}})">

标签： amp-htmlamp-bind

解决方案

据我所知，不可能在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。

推荐阅读