我可以使用 amp-state 设置简单的键值对吗？

Question

我正在尝试使用 amp-state 设置一个简单的 {key: value} 对。目前在我的代码中，我必须在键值对的每个设置状态上进行初始化。

该项目在模板中使用 express-handlebar 模板和 AMP 进行状态管理。每个键都有一个默认的车把值。

但是当一个值改变时，我必须初始化所有放大器状态值。这会导致大量重复代码，可以通过将状态设置为初始值来进行大量改进。但是，将所有 amp 状态重构为包含键值对的大对象会使我的代码变得相当复杂，因此我宁愿不使用您可以在 amp 文档中找到的确切示例。

例如我想替换这样的东西：

tap:AMP.setState({
     lng: 'en',
     selectedVal: selectedVal || '{{baseVal}}',
     rate: rate || {{lookup currencyRates  baseCurrency}},
     symbol: symbol || '{{lookup symbols baseCurrency}}'
}),

和

tap:AMP.setState({
     lng: 'en', 
}),

为了做到这一点（并避免错误），我需要使用 <amp-state>...</amp-state> 初始化页面底部的所有字段（并且在这种情况下只更改语言）

我试图寻找解决方案，但我找不到。有谁知道是否有解决方案？如果是？如果不是，有谁知道为什么？

谢谢指教。

Answer 1

AMP.setState 允许您深度合并状态对象：

https://amp.dev/documentation/components/amp-bind/?format=websites#deep-merge-with-amp.setstate()

我认为您缺少状态对象的初始化，它允许您使用默认值填充状态。

https://amp.dev/documentation/components/amp-bind/?format=websites#initializing-state-with-amp-state

您可以通过 a) 将 JSON 直接渲染到 amp-state 组件或 b) 使用 src 从端点检索数据的属性。

a) 服务器渲染状态

<amp-state id="myStateObject">
<script type="application/json">
{
    "lng": "en",
    "selectedVal": "lookup baseVal",
    "rate": "lookup currencyRates baseCurrency",
    "symbol": "lookup symbols baseCurrency"
}
</script>
</amp-state>

或

b) 使用 src 属性

<amp-state id="myStateObject" src="/some/json/endpoint"></amp-state>

这使您可以访问 myStateObject，然后您可以使用它来将对象文字与当前状态合并。

<button
    on="tap:AMP.setState({
        myStateObject: {
            selectedVal: 'newSelectedVal'
        }
    })"
>
    Click me
</button>

Answer 2

我终于找到了答案。也许它也会帮助其他人。

所以即使在 amp bind documentation there are no examples with just a key-value pair, seems like on this 页面中也有困难。结论是你可以通过在脚本标签中插入一个简单的字符串来加载一个简单的键值对（类似于他们在第二页上的这个例子）：

<amp-state id="myText">
  <script type="application/json">
    "World"
  </script>
</amp-state>

我发现它很混乱，因为我希望在脚本标记内放置一个 json 对象。但这似乎工作得很好。

我可以使用 amp-state 设置简单的键值对吗？

Can I set a simple key-value pair using amp-state?

html

amp-html

express-handlebars