问题描述
我有一封 AMP 电子邮件,我希望复选框显示为选中或未选中,具体取决于来自我的服务器的值。如果值 {{done}}
为 false,我希望该框未选中;如果 {{done}}
为 true,我希望选中该框。
<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>
其他动态字段正确填充。我的问题是我无法将 done
布尔值直接传递到 checked
属性中,因为 false
呈现为一个字符串,它是真实的并选中该框。
我发现了一个与此问题非常相似的问题 here。这种方法是我最初使用的,并且效果很好。但是,现在无论传递给 [checked]
属性的值如何,我的复选框都未选中。
我怀疑 AMP 电子邮件可能有一些正在进行的开发,因为我有 a similar issue,AMP 团队最终确认这是一个错误。
解决方法
- 您正在使用
[checked]
,它是属性绑定的语法,仅在导入amp-bind
时才有效。您需要添加<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
。- 也许 AMP 应该向 JS 控制台打印警告以获得更好的开发者体验,因此请考虑提交功能请求。
- 您在
binding=refresh
上使用了amp-list
,它告诉组件仅在刷新列表时评估绑定,而在列表初始加载时不。要在初始加载时评估[checked]
,您需要binding=always
或完全省略binding
属性。