2016-07-30 16 views
4

Ich versuche, this example ohne Erfolg zu replizieren. Ich möchte eine Liste hinzufügen, um eine mustache Vorlage, wie folgt aus:Fehler beim Versuch, Amp-Schnurrbart zu implementieren

<ul> 
    <amp-list width=auto 
       height=100 
       layout=fixed-height 
       src="/assets/popular.json"> 
      <template type="amp-mustache" 
        id="amp-template-id"> 
       <li> 
        <a href={{url}}>{{title}}</a> 
       </li> 
      </template> 
    </amp-list> 
</ul> 

Meine /assets/popular.json Datei ist:

{ 
"items": [ 
    { 
    "title": "amp-carousel", 
    "url": "https://ampbyexample.com/components/amp-carousel" 
    }, 
    { 
    "title": "amp-img", 
    "url": "https://ampbyexample.com/components/amp-img" 
    }, 
    { 
    "title": "amp-ad", 
    "url": "https://ampbyexample.com/components/amp-ad" 
    }, 
    { 
    "title": "amp-accordion", 
    "url": "https://ampbyexample.com/components/amp-accordion" 
    } 
] 
} 

Aber ich kann es nicht zur Arbeit kommen, werden die Werte in der json werden nicht ersetzt in der Vorlage, bekomme ich diesen Fehler:

Missing URL for attribute 'href' in tag 'a' 

ich weiß nicht, warum der Wert {{url}} nicht ordnungsgemäß ersetzt wird mit dem Inhalt der json.

Ich habe die notwendigen scripts in den Kopf hinzugefügt.

+0

Ich denke, Ihre JSON-Datei nicht korrekt geladen wird, überprüfen Sie bitte in die Netzwerk-Registerkarte, um zu sehen, ob Sie die Datei bekommen. –

+0

@ShlomiHaver, Ja, ich bekomme die Datei. – elbaulp

+0

Können Sie unseren Code in jfiddle? –

Antwort

6

Kürzlich Ich habe zu Hugo von Jekyll Migration und haben das gleiche Problem konfrontiert. Im Folgenden finden Sie Lösungen für beide.

Jekyll

Es ist nun gelöst ist, war das Problem, das ich jekyll benutze und so die Tags {{tag}} wurden als liquid tag interpretiert. Ich löste den Code wie folgt schreiben:

<ul> 
<amp-list width=auto 
    height=100 
    layout=fixed-height 
    src="/assets/popular.json"> 
    <template type="amp-mustache" 
     id="amp-template-id"> 
    <li> 
     <a href="{% raw %}{{url}}{% endraw %}">{% raw %}{{title}}{% endraw %}</a> 
    </li> 
    </template> 
</amp-list> 
</ul> 

aktualisieren: Ich habe eine more detailed explanation

Hugo geschrieben

<ul> 
<amp-list width=auto 
    height=100 
    layout=fixed-height 
    src="/assets/popular.json"> 
    <template type="amp-mustache" 
     id="amp-template-id"> 
    <li> 
     <a class="card related" id={{"{{id}}"}} {{ printf "href=%q" ""{url}}" | safeHTMLAttr }}> 
     {{"{{title}}"}} 
     </a> 
    </li> 
    </template> 
</amp-list> 
</ul> 
Verwandte Themen