代码之家 › 专栏 › 技术社区 › Fer

如何在AMP中混合多个JSON数据源的结果?

amp-html

Fer · 技术社区 · 7 年前

我正在输出一个链接列表,其中我需要混合来自不同JSON数据源的模板中的值。

伪标记:

<a href="{link1}/{link2}">{title1}</a>

在上面的例子中,link1和title1来自json 1,而link2来自json 2。

要清楚:我知道通过将JSON数据源合并到单个服务中可以完全避免这个挑战,但是在我的场景中,这是不可能的,原因并不相关。

在总体思路上再展开一点,上面的伪标记我将包装成一个AMP列表:

<amp-list id="mylist" width="auto" height="160px" layout="fixed-height" src="//json1">
    <template type="amp-mustache">
        <a href="{{buyURL}}={{UID}}">
           <amp-img src="{{logoURL}}" width="{{logoWidth}}" height="{{logoHeight}}" layout="fixed" alt="{{name}}">
            </amp-img>
         </a>
    </template>
</amp-list>

我删除了与问题无关的属性。在上面的代码中,除了 _uid_ 一个。这个需要来自一个单独的JSON服务,现在我们称它为JSON2。

因此,我的挑战是集成来自第二个数据源的值,并将其混合到绑定到第一个数据源的模板输出中。以下是我的尝试:

允许嵌套列表,但只能将模板放在正确列表的层次结构中。把它们放在同一水平上,使AMP只需选择第一个或抛出一个错误“找不到模板”。

我一直在执行上述场景。我不知道如何接近它,也不知道它在哪里。

2 回复 | 直到 7 年前

Sebastian Benz 7 年前

您可以尝试组合AMP状态和AMP列表:

<amp-state id=json2 src=json2></amp-state>

<amp-list id="mylist" width="auto" height="160px" layout="fixed-height" src="//json1">
    <template type="amp-mustache">
        <a href="{{buyURL}}" [href]="'{{buyUrl}}=' + json2.uuids['{{name}}']" >
           <amp-img src="{{logoURL}}" width="{{logoWidth}}" height="{{logoHeight}}" layout="fixed" alt="{{name}}">
            </amp-img>
         </a>
    </template>
</amp-list>

AMP列表当前在呈现其内容时评估绑定。但是,这种行为目前正在讨论中,可能会发生变化(通过适当的解决方法)。

下面是一个演示该方法的示例: https://amp-demos.glitch.me/two-json.html .

Fer 7 年前

自我回答我的问题。请注意,这个答案很大程度上受到了塞巴斯蒂安奔驰的另一个答案的启发,但是有一些小的变化。

<amp-state id="requestID">
  <script type="application/json">
    {
    "unid": "123654"
    }
  </script>
 </amp-state>

 <amp-list id="mylist" width="auto" height="160px" src="//.." items="..">
    <template type="amp-mustache">
       <a href="" [href]="'{{URL}}&id=' + requestID.unid">{{name}}</a>
    </template>
 </amp-list>

在上面的示例中,url和name来自AMP列表JSON源,而requestID.unid来自第二个JSON源。语法显示了如何将两个数据源连接到一个属性:href。与其他答案的主要区别在于:

Href应为空,未分配URL
[href]中的表达式不应分配变量,应改为计算返回值