与AMP.setState深度合并 [英] Deep-merge with AMP.setState
本文介绍了与AMP.setState深度合并的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不知道如何通过AMP.setState覆盖数据.
I can't figure out how to overwrite data via AMP.setState.
我准备了一个例子:
- 我有一个产品清单，通过amp-list输出.
- 每种产品都有一个数量"值.
- 每个产品都有两个按钮:增加数量和减少数量.
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": ["logo.jpg"]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style>
</noscript>
</head>
<body>
<amp-state id="productData" src="https://alexkazakov.info/layout/amp-edit-array-state/data.json"></amp-state>
<h1>Welcome to the AMP web</h1>
<amp-list height="100" items="." src="https://alexkazakov.info/layout/amp-edit-array-state/data.json" single-item [src]="productData">
<template type="amp-mustache">
{{#items}}
<h3>{{name}}</h3>
<p>Quantity: {{quantity}}</p>
<button class="btn" on="tap:AMP.setState({productData: {items: {quantity: {{quantity}} + 1 } }})">Add +</button>
<button class="btn" on="tap:AMP.setState({productData: {items: {quantity: {{quantity}} - 1 } }})">Reduce -</button>
<hr />
{{/items}}
</template>
</amp-list>
</body>
</html>
以下是此处使用的JSON:
{
"items": [
{ "id": "0", "name": "Item 1", "price": 1.99, "quantity": 18 },
{ "id": "1", "name": "Item 2", "price": 2.99, "quantity": 15 },
{ "id": "2", "name": "Item 3", "price": 0.99, "quantity": 33 }
],
"total": "9.94",
"discount": "0%"
}
代码笔: https://codepen.io/alexandr- kazakov/pen/WNQWodZ
在我的示例中，我覆盖了"items"的整个值，这是不正确的.我需要单击按钮时，只有一种产品的数量减少或增加.我该怎么办?
In my example, I overwrite the entire value of 'items', this is incorrect. I need that when you click on the button, the quantity of only one product decreases or increases. How do I do this?
推荐答案
经过数小时的思考和尝试，我做出了这个决定:
After many hours of thinking and trying I came to this decision:
我写了两个amp-bind-macro，完全覆盖了对象.
在amp-bind-macro中，我传递索引以确定单击了哪个按钮.我进行了很多搜索，以查看amp-list中的循环是否在每次迭代中都具有内置索引，但是我没有找到它们.我必须从JSON获取索引.
I wrote two amp-bind-macro and completely overwrite the object.
In amp-bind-macro, I pass the index to determine which button was clicked. I searched a lot to see if the loop in amp-list has built-in indexes on each iteration, but I didn't find them. I have to take indexes from JSON.
我尝试使用扩展运算符，但AMP似乎不支持它.我必须这样做，但是主要的是我已经解决了我的问题.
I tried using the spread operator, but it doesn't seem to be supported in AMP. I had to do this, but the main thing is that I have solved my problem.
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": ["logo.jpg"]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style>
</noscript>
</head>
<body>
<amp-state id="productData" src="https://alexkazakov.info/layout/amp-edit-array-state/data.json"></amp-state>
<h1>Welcome to the AMP web</h1>
<amp-list height="100" items="." src="https://alexkazakov.info/layout/amp-edit-array-state/data.json" single-item [src]="productData">
<template type="amp-mustache">
{{#items}}
<h3>{{name}}</h3>
<p>Quantity: {{quantity}}</p>
<amp-bind-macro id="addQuantity" arguments="argIndex" expression="productData.items.map((item, index, array) => index == argIndex ? {id: item.id, name: item.name, price: item.price, quantity: item.quantity + 1} : item )"></amp-bind-macro>
<amp-bind-macro id="reduceQuantity" arguments="argIndex" expression="productData.items.map((item, index, array) => index == argIndex ? {id: item.id, name: item.name, price: item.price, quantity: item.quantity - 1} : item )"></amp-bind-macro>
<button class="btn" on="tap:AMP.setState({productData: {items: addQuantity({{id}}) }})">Add +</button>
<button class="btn" on="tap:AMP.setState({productData: {items: reduceQuantity({{id}}) }})">Reduce -</button>
<hr />
{{/items}}
</template>
</amp-list>
</body>
</html>
正在运行的演示: https://codepen.io/alexandr-kazakov/pen/ExVJQYL
这篇关于与AMP.setState深度合并的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
