SiZapPaaiGwat/ajax-button.html

## ajax-button.html
<button on-click="{{loading ? '' : 'request'}}" type="{{type || 'button'}}"
  class="{{className}}" {{#if disable}} disable {{/if}}>
  {{#if loading}}
    {{loadingText}}
  {{else}}
    {{text}}
  {{/if}}
</button>

<script>
// test 测试
 var $ = require('jquery')

 component.exports = {
   onrender: function() {
     var self = this

     this.on('request', function(e) {
       this.set('loading', true)

       var data = this.get()
       var url = $.isFunction(data.url) ? data.url() : data.url
       var formData = $.isFunction(data.data) ? data.data() : data.data

       $.post(url, formData).then(function() {
         self.fire('success', e, arguments)
       }).fail(function() {
         self.fire('error', e, arguments)
       }).always(function() {
         self.set('loading', false)
       })
     })
   }
 }
</script>

## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ractive single file component demo</title>
  </head>
  <body>
    <div id="a">

    </div>
    <script type="text/x-handlebars-template" id="tpl">
      <ajaxButton url="./" data=""
          text="确定" loadingText="正在提交..." disable="" className="btn btn-primary"
          on-success="" on-error=""
        />
    </script>
    <script src="assets/js/require.js"></script>
    <script>
      require.config({
        baseUrl: './',
        paths: {
          ractive: 'http://cdn.bootcss.com/ractive/0.7.3/ractive',
          component: '../../components'
        }
      })

      require(['ractive', 'rvc!component/ajax-button'], function(Ractive, ajaxButton) {
        var app = new Ractive({
          el: '#a',
          template: '#tpl',
          components: {
            ajaxButton: ajaxButton
          }
        })
      })
    </script>
  </body>
</html>
	<button on-click="{{loading ? '' : 'request'}}" type="{{type \|\| 'button'}}"
	class="{{className}}" {{#if disable}} disable {{/if}}>
	{{#if loading}}
	{{loadingText}}
	{{else}}
	{{text}}
	{{/if}}
	</button>

	<script>
	// test 测试
	var $ = require('jquery')

	component.exports = {
	onrender: function() {
	var self = this

	this.on('request', function(e) {
	this.set('loading', true)

	var data = this.get()
	var url = $.isFunction(data.url) ? data.url() : data.url
	var formData = $.isFunction(data.data) ? data.data() : data.data

	$.post(url, formData).then(function() {
	self.fire('success', e, arguments)
	}).fail(function() {
	self.fire('error', e, arguments)
	}).always(function() {
	self.set('loading', false)
	})
	})
	}
	}
	</script>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ractive single file component demo</title>
	</head>
	<body>
	<div id="a">

	</div>
	<script type="text/x-handlebars-template" id="tpl">
	<ajaxButton url="./" data=""
	text="确定" loadingText="正在提交..." disable="" className="btn btn-primary"
	on-success="" on-error=""
	/>
	</script>
	<script src="assets/js/require.js"></script>
	<script>
	require.config({
	baseUrl: './',
	paths: {
	ractive: 'http://cdn.bootcss.com/ractive/0.7.3/ractive',
	component: '../../components'
	}
	})

	require(['ractive', 'rvc!component/ajax-button'], function(Ractive, ajaxButton) {
	var app = new Ractive({
	el: '#a',
	template: '#tpl',
	components: {
	ajaxButton: ajaxButton
	}
	})
	})
	</script>
	</body>
	</html>