控制纸张复选框的状态

时间:2015-02-08 22:12:30

标签: polymer paper-elements

我正在尝试设置一个内部带有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,但复选框仍会执行切换动画。

澄清一下,这是我想要的流程:

  1. 未选中复选框
  2. 我点击复选框(我不想让它切换)
  3. 发送Ajax请求
  4. 等待回电
  5. 如果成功,请切换复选框的状态

2 个答案:

答案 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;