我可以使用amp状态设置简单的键/值对吗?

问题描述 投票:0回答:2

我正在尝试使用amp-state设置简单的{key:value}对。当前,在我的代码中,我必须在键-值对的每个设置状态上进行初始化。该项目使用快速车把模板和AMP用于模板中的状态管理。每个键都有一个默认的车把值。但是,当更改一个值时,我必须初始化所有放大器状态值。这导致很多重复的代码,可以通过将状态设置为初始值来进行很多改进。但是要将所有内容转换为包含键值对的大对象会使我的代码复杂化很多,因此我宁愿不使用在amp文档中可以找到的确切示例。

例如,我想默认类似的东西

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

此使用<amp-state>...</amp-state>

我试图寻找解决方案,但无法。有谁知道是否有解决方案?如果是的话,女巫?如果没有,有谁知道为什么?

非常感谢。

html amp-html express-handlebars
2个回答
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>

OR

b)使用src属性

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

这使您可以访问myStateObject,然后可以将其用于合并对象文字和当前状态。

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

0
投票

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

因此amp bind文档中即使没有什么困难,也没有示例只有键-值对,就像this页面上的例子一样。结论是您可以通过在script标记内插入一个简单的字符串来加载一个简单的键/值对(类似于第二页上的示例):

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

我发现这很令人困惑,因为我希望在脚本标签内放置一个json对象。但这似乎很好用。

© www.soinside.com 2019 - 2024. All rights reserved.