2

Ractive.jsを使用しています。

ボタンのクリックで非同期処理を開始するので、二度押し防止のためにdisabledにしたいのですが、Ractive.jsではどのようにdisabledにするのが王道パターンなのでしょうか?

サンプルHTML

<script id="myTemplate" type="text/ractive">
    <button on-click="login">Log in</button>
</script>

これに対するJavaScript

var ractive = new Ractive({
    el : '#container',
    template : '#myTemplate',
}).on('login', function(e) {
    // ボタンが押された時の処理
    // 押されたボタンをdisabledにしたい
    // idを付けて、$('#loginButton').attr('disabled','disabled');
    // は、何か違う気がする。。。
});

1 件の回答 1

2

Ractive.js は Virtual DOM ですので DOM に対する操作は、すべて data/ractive.set() 経由でやるのが正しいです。

そのため HTML では、以下のように変数 processingLogin を新設して、そのまま disabled 属性に繋ぎます。

<div id="container"></div>
<script id="myTemplate" type="text/ractive">
    <button on-click="login" disabled="{{processingLogin}}">Log in</button>
</script>

JavaScript のほうでは以下のように login イベントを受けて、processingLogin に対して settrue を設定するようにします。なお、この例では2秒後に自動的に false に戻すようにしました。

var ractive = new Ractive({
    el : '#container',
    template : '#myTemplate',
}).on('login', function(e) {
    var r = this;
    this.set('processingLogin', true);
    setTimeout(function() {
        r.set('processingLogin', false);
    }, 2000);
});

上記のコードは How to disable button on Ractive.js で試せます。

どうしても DOM 操作を自分でやりたい場合は、このケースでは e.node にイベント発生源となった DOM ノードが格納されているので、それを利用すると良いでしょう。またどうしても DOM クエリーを行いたいならば、 jQuery ではなくて ractive.find() を使うと、Ractive.js に閉じることができて、より良いと考えられます。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。