4

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. 成功した場合は、チェックボックスの状態を切り替えます
4

2 に答える 2

1

実際にそれを行うにはいくつかの方法があります。私はこれを行う 2 つの方法を示すために、このプランカーを作成しました。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;
于 2015-02-09T16:05:28.193 に答える