AMP email - [checked] bound attribute doesn't affect checkbox status

Question

I have an AMP email and I want checkboxes to appear as checked or unchecked depending on a value coming from my server. If the value {{done}} is false, I want the box to appear unchecked and if {{done}} is true, I want the box checked.

Here is the code for the email:

               <amp-list                             
                            template="checklist-item-template"
                            src="MY_SOURCE_URL"
                            layout="responsive"
                            binding="refresh" 
                            width="600"
                            height="56"
                            ><template
                                id="checklist-item-template"
                                type="amp-mustache"
                            >
                                <div class="task-row outline">
                                    <div class="task task-checkbox">
                                        <input
                                            type="checkbox"
                                            id="checkbox-{{id}}"
                                            value="checked"
                                            name="{{id}}"
                                            [checked]="{{done}}"
                                            on="change:checklist-form.submit"
                                        />
                                    </div>
                                    <div class="task task-name">
                                        {{done}}
                                    </div>
                                    <div class="task small-text task-icons">
                                        {{deadline}}
                                    </div>
                                    <div class="task task-burger"></div>
                                </div>
                            </template>
                            <div overflow class="list-overflow">
                                See more
                            </div>
                        </amp-list>

The other dynamic fields populate correctly. My problem is that I can't pass the done boolean directly into the checked attribute because false is rendered as a string, which is truthy and checks the box.

I have found a very similar question for this issue here. This approach is what I originally used and it worked well. However, now my checkboxes are unchecked regardless of the value passed into the [checked] attribute.

I suspect that there may be some ongoing development with AMP email as I had a similar issue, which was confirmed by the AMP team to be a bug at their end.

Answer 1

• You are using [checked], which is the syntax for attribute binding and only works if amp-bind is imported. You need to add <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>.
  • Maybe AMP should print a warning to the JS console for better developer experience, so consider filing a feature request.
• You are using binding=refresh on amp-list, which tells the component to only evaluate binding when refreshing the list and not during the initial load of the list. To evaluate [checked] on initial load, you need binding=always or omit the binding attribute altogether.