Search code examples
javascripthtmlamp-html

Why data-amp-bind-href or [href] don't work in amp-bind component?

I want to create a dynamic link in amp. Everything is OK when use amp-bind component except bind state to href! My code is look like below:

<input
  on="input-throttled:AMP.setState({ buyForm: { name: event.value } })
  name="name"
  type="text"
/>
<a
  href="localhost:5000/api/v1/buy"
  data-amp-bind-href="'localhost:5000/api/v1/buy?name=' + buyForm.name"
>
Solution

  • Your sample works (if you import the amp-bind extension and add a protocol to the URL). This is what I tried:

    <head>
    ...
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
<input on="input-throttled:AMP.setState({ buyForm: { name: event.value } })" name="name" type="text" />
<a href="https://google.com" data-amp-bind-href="buyForm.name">Test</a>
</body>