5705


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

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

サンプルHTML

[code]

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

これに対するJavaScript

[code]

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


CC BY-SA 3.0
2015-02-01T12:43:34.823
5703
2015-02-01T13:05:46.030
845
question
javascript ractive.js
Ractive.jsで、押されたボタンをdisabledにするには？


Ractive.js は Virtual DOM ですので DOM に対する操作は、すべて
[`data/ractive.set()`](http://docs.ractivejs.org/latest/ractive-set)
経由でやるのが正しいです。

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

[code]

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

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

[code]

    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);
    });
    
[/code]

上記のコードは [How to disable button on
Ractive.js](http://jsfiddle.net/koron/brzy59j8/) で試せます。

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


CC BY-SA 3.0
2015-02-01T13:05:46.030
5705
2015-02-01T13:05:46.030
208
5703
answer