[英]amp-list inside amp-list
I have this json of posts我有这个 json 的帖子
{
"items": [
{
"titulo": "¿Pensando en comprar casa? No pierdas de vista el subsidio para viviendas No VIS que te ayuda a pagarla",
"resumen": "Hoy queremos contarte todo sobre este subsidio para que no te quede ninguna duda y corras a pedirlo.",
"imagen": "https://xxxxx/blog/entries/SubsidioNoVis/image.jpg",
"autor": "Redacción xxxxx",
"creacion": "2021-03-26T05:00:00.000Z",
"etiquetas": [
"Compra",
"Subsidio",
"No VIS"
],
"id": "605e63d7bd314031df227b13"
},
{
"titulo": "Subarriendo ¿legal o no?",
"resumen": "Algunos inquilinos deciden subarrendar sin el consentimiento del dueño, ¿Es ilegal este procedimiento?.",
"imagen": "https://xxxxxx/blog/entries/SubarrendarLegalONo/image.jpg",
"autor": "Redacciónxxxxxx",
"creacion": "2021-02-20T05:00:00.000Z",
"etiquetas": [
"Arriendo"
],
"id": "6031b3c018ea033afbbf3f6b"
}
]
}
I'm using amp to loop through them and paint them like this using pug (jade)我正在使用 amp 循环它们并使用哈巴狗(玉)像这样画它们
amp-list(
layout="fixed-height",
height="460",
src="/json/posts.json" )
template(type="amp-mustache")
div(style=' flex: 1 1 100%; box-sizing: border-box; max-width: 100%; padding: 0px 1em 1em 0px;')
div(class="main" style='flex-direction: column; box-sizing: border-box; display: flex;')
div(class='bg-imagen' style='background-image: url("{{imagen}}");')
div(class="etiquetas")
span(class="etiqueta") {{etiquetas}}
div(class='contenido' style='flex: 1 1 1e-09px; box-sizing: border-box;')
h4
a(href="/resvista/post/{{id}}" target="_blank") {{titulo}}
div(class='fecha')
i(class='fas fa-calendar-alt')
span(class='texto') {{creacion}}
p {{resumen}}
Give something like this给这样的东西
but what i want to achieve is this但我想要实现的是这个
However my problem arises when I want to go through the key labels that is an array within each post and that contains a string and I have not been able to make the amp-list work within the amp-list like this for example但是,当我想通过每个帖子中的数组并包含一个字符串的键标签 go 并且我无法使 amp-list 在 amp-list 中像这样工作时,我的问题就出现了
amp-list(
layout="fixed-height",
height="460",
src="/json/posts.json" )
template(type="amp-mustache")
div(style=' flex: 1 1 100%; box-sizing: border-box; max-width: 100%; padding: 0px 1em 1em 0px;')
div(class="main" style='flex-direction: column; box-sizing: border-box; display: flex;')
div(class='bg-imagen' style='background-image: url("{{imagen}}");')
div(class="etiquetas")
amp-list( layout="fixed-height", height="460", [src]="etiquetas")
template(type="amp-mustache")
span(class="etiqueta") {{ . }}
div(class='contenido' style='flex: 1 1 1e-09px; box-sizing: border-box;')
h4
a(href="'/resvista/post/'+id" target="_blank") {{titulo}}
div(class='fecha')
i(class='fas fa-calendar-alt')
span(class='texto') {{creacion}}
p {{resumen}}
I'm not sure if an amp-list can be used inside another amp-list and how to pass the array to the second amp-list我不确定是否可以在另一个 amp-list 中使用 amp-list 以及如何将数组传递给第二个 amp-list
best solution for this situation is to use a loop inside your mustache template这种情况的最佳解决方案是在你的 mustache 模板中使用循环
loop in mustache: https://codepen.io/johnsonshara/pen/mPzbBO小胡子循环: https://codepen.io/johnsonshara/pen/mPzbBO
{
"items": [
{
"titulo": "¿Pensando en comprar casa? No pierdas de vista el subsidio para viviendas No VIS que te ayuda a pagarla",
"resumen": "Hoy queremos contarte todo sobre este subsidio para que no te quede ninguna duda y corras a pedirlo.",
"imagen": "https://xxxxx/blog/entries/SubsidioNoVis/image.jpg",
"autor": "Redacción xxxxx",
"creacion": "2021-03-26T05:00:00.000Z",
"etiquetas": [
{"etiqueta_key":Compra"},
{"etiqueta_key":"Subsidio"},
{"etiqueta_key":"No VIS"}
],
"id": "605e63d7bd314031df227b13"
}
]
}
amp-list(
layout="fixed-height",
height="460",
src="/json/posts.json" )
template(type="amp-mustache")
div(style=' flex: 1 1 100%; box-sizing: border-box; max-width: 100%; padding: 0px 1em 1em 0px;')
div(class="main" style='flex-direction: column; box-sizing: border-box; display: flex;')
div(class='bg-imagen' style='background-image: url("{{imagen}}");')
div(class="etiquetas")
{{#etiquetas}}
span(class="etiqueta") {{etiqueta_key}}
{{/etiquetas}}
div(class='contenido' style='flex: 1 1 1e-09px; box-sizing: border-box;')
h4
a(href="/resvista/post/{{id}}" target="_blank") {{titulo}}
div(class='fecha')
i(class='fas fa-calendar-alt')
span(class='texto') {{creacion}}
p {{resumen}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.