JSFiddle - React, Tailwind, and code Playground

by damngoto

HTML

<div id="a">
    
</div>

<script id="tmpl" type="text">
    <h1>演示Component event directives</h1>
    <ajaxButton text="确定" loadingText="正在提交..." on-click="post" />
    <br>
        <a href="http://docs.ractivejs.org/latest/event-directives#component-event-directives">http://docs.ractivejs.org/latest/event-directives#component-event-directives</a>
</script>
    
    <script id="button" type="text">
<button on-click="request" type="{{type || 'button'}}"
  class="{{className}}" disable="{{disable ? true : false}}">
  {{#if loading}}
    {{loadingText}}
  {{else}}
    {{text}}
  {{/if}}
</button>
</script>

JavaScript

var app = new Ractive({
    el: '#a',
    template: '#tmpl',
    components: {
        ajaxButton: Ractive.extend({
            template: '#button',
            onrender: function() {                
                this.on('request', function() {
      this.on('request', function(e) {
        this.set('loading', true)

        this.fire('click', e, this)
      })
                })
            }
        })
    }
})

app.on('post', function(e, plugin) {
    setTimeout(function() {
        plugin.set('loading', false)
    }, 3000)
})