[英]AMP email - [checked] bound attribute doesn't affect checkbox status
I have an AMP email and I want checkboxes to appear as checked or unchecked depending on a value coming from my server.我有一个 AMP email,我希望复选框显示为选中或未选中,具体取决于来自我的服务器的值。 If the value {{done}}
is false, I want the box to appear unchecked and if {{done}}
is true, I want the box checked.如果值{{done}}
为 false,我希望该框未选中,如果{{done}}
为 true,我希望该框选中。
Here is the code for the email:这是 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.我的问题是我无法将done
的 boolean 直接传递到checked
的属性中,因为false
被呈现为字符串,这是真实的并选中该框。
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.但是,现在无论传递给[checked]
属性的值如何,我的复选框都未选中。
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.我怀疑 AMP email 可能正在进行一些开发,因为我遇到了类似的问题,AMP 团队最终确认这是一个错误。
[checked]
, which is the syntax for attribute binding and only works if amp-bind
is imported.您正在使用[checked]
,这是属性绑定的语法,仅在导入amp-bind
时才有效。 You need to add <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
.您需要添加<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
。
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.您在amp-list
上使用binding=refresh
,它告诉组件仅在刷新列表时而不是在列表的初始加载期间评估绑定。 To evaluate [checked]
on initial load, you need binding=always
or omit the binding
attribute altogether.要在初始加载时评估[checked]
,您需要binding=always
或完全省略binding
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.