アンプリストテンプレートの中でどのように文字列操作を行うことができますか？

amp-bindを使用すると、アンカーに対して[href]を更新できます。しかし、同じアンカーをamp-listテンプレートに含めると、[href]は、テンプレートが適用されたときにマングルされているように見えます（元の場所とエンコードされたURIの先頭に追加されます）。特に、文字列の前後に単一引用符がないため、コンパイルエラーが発生します。アンプリストテンプレートの中でどのように文字列操作を行うことができますか？

次の例では、amp-listテンプレートによって生成されたリンクがマングル化されているのに対し、amp-listの前のリンクはボタンのプレス上で正常に更新されます。興味深いことに、のアンカーはにあります。テンプレートが適用された後で、[href]がマングルされます。テンプレート内の

アンカー：

<a href="https://amp-test/" [href]="path ? 'https://amp-test/' + path.split(' ').join('-') : 'https://amp-test/'">{{linkName}}</a>

アンカーテンプレートが適用された後：

<a href="https://amp-test/" [href]="https://amp-test/path%20?%20%27https://amp-test/%27%20+%20path.split(%27%20%27).join(%27-%27)%20:%20%27https://amp-test/%27" target="_top" class="i-amphtml-error">one path</a>

ので、タイトルの質問を伴うかもしれないいくつかの質問には、次のとおりですamp-bind操作がamp-list内で動作するようになっていますか？つまり、予想される動作やバグを見ているのでしょうか？

例（jsfiddle）

results.json

{ 
    "items": [ 
     { "linkName": "one path" }, 
     { "linkName": "two path" } 
    ] 
}

index.htmlを最小限

<!doctype html> 
<html ⚡> 
<head> 
    <title>amp-bind in amp-list</title> 
    <meta charset="utf-8"> 
    <script async src="https://cdn.ampproject.org/v0.js"></script> 
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.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.1.js"></script> 
    <link rel="canonical" href="https://cmphys.com/"> 
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> 
    <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> 

    <style amp-custom> 
    </style> 
</head> 
<body> 
    <button on="tap:AMP.setState({path: 'relative path'})">Update</button> 

    <hr> 
    <p> 
     <a href="https://amp-test/" [href]="path ? 'https://amp-test/' + path.split(' ').join('-') : 'https://amp-test/'">link</a> 
    </p> 

    <hr> 
    <amp-list id="myList" class="list" layout="fixed" width="200" height="100" src="/results.json"> 
     <template type="amp-mustache"> 
      <a href="https://amp-test/" [href]="path ? 'https://amp-test/' + path.split(' ').join('-') : 'https://amp-test/'">{{linkName}}</a><br> 
     </template> 
    </amp-list> 

</body> 
</html>

出典

2017-09-18 MDMower

あなたのポストのAMPのコンテンツを操作するためにSanitizersを使用してみてください。このために、禁止されたURLプロトコルやAMP Validatorに失敗する式は避けてください。

式が文字列の場合：

アンペア、リスト内のアンプ・バインド操作に関しては、あなたは<amp-list>コンポーネントに結合し、許可されると、それは行動ださ属性がそれであることを述べていますここで、このdocumentationをチェックすることもできます文字列URLからJSONを取り出してレンダリングします。 expressionがオブジェクトまたは配列の場合、式データがレンダリングされます。

出典

2017-09-19 18:08:07 Teyam

サニタイズの使用を推奨する理由がわかりません。私はAMP HTMLドキュメントから始めて、HTMLからAMP HTMLにページを変換しません。あなたが指し示す（および引用された）文書は、アンパリストテンプレート内の要素属性ではなく、アンパリスト属性[src]のみを参照します。 – MDMower

アンプリストテンプレートの中でどのように文字列操作を行うことができますか？

答えて

関連する問題