我正在尝试设置一个内部带有paper-checkbox
的元素。我希望复选框的选中状态由ajax调用的响应控制。
HTML:
<epic-list-episode checked="<%= episode.seen? %>">
<p><strong><%= episode.show.name %></strong></p>
</epic-list-episode>
自定义元素:
<polymer-element name="epic-list-episode" attributes="checked">
<template>
<link rel="stylesheet" href="epic-list-episode.css.scss" />
<div horizontal layout center>
<div flex>
<content></content>
</div>
<div vertical layout>
<paper-checkbox checked?="{{checked === 'true'}}" on-change="{{changeHandler}}"></paper-checkbox>
</div>
</div>
</template>
<script>
Polymer({
changeHandler: function(event) {
//Send ajax, wait for error/success callback
//checkbox.checked = response from ajax
}
});
</script>
</polymer-element>
如何实现这一目标?我已尝试return false
,但复选框仍会执行切换动画。
澄清一下,这是我想要的流程:
答案 0 :(得分:2)
我认为您根本不需要checked
属性。
您可以执行的操作是,在调用on-change
时,将checked
的{{1}}属性设置回其先前的值。然后在ajax回调之后,将其设置回原来的状态。
paper-checkbox
请注意,我还添加了一些动画代码,让用户感觉changeHandler: function (event, detail, sender) {
this.$.checkbox.checked = !this.$.checkbox.checked;
// give the checkbox a little loading animation
var loading = new CoreAnimation();
loading.duration = 750;
loading.easing = 'ease-in';
loading.keyframes = [{ opacity: 1, transform: "scale(1)" }, { opacity: 0.4, transform: "scale(0.9)" }];
loading.direction = 'alternate';
loading.iterations = '1000';
loading.target = this.$.checkbox;
loading.play();
// give it a little delay to act like a callback
this.job('delay', function () {
// stop the animation
loading.finish();
this.$.checkbox.checked = !this.$.checkbox.checked;
}, 3000);
}
正在做些什么,以获得更好的用户体验。有关工作示例,请参阅此jsbin。
答案 1 :(得分:1)
有几种方法可以实现它。我已经让这个掠夺者展示了我这样做的两种方式。 http://plnkr.co/edit/xqHCSvs63u4bdFJYM6TF?p=preview
使用声明性绑定
<paper-checkbox checked="{{checked}}" on-change="{{changeHandler}}"></paper-checkbox>
你脚本中的
this.checked = true;
和纯粹的js
<paper-checkbox id="box" on-change="{{changeHandler}}"></paper-checkbox>
然后在你的脚本中
var box = document.querySelector("#box");
box.checked = true;