JSFiddle - React, Tailwind, and code Playground

by nuysoft

HTML

<script src="http://g.tbcdn.cn/thx/brix-release/0.0.23/require-config.js"></script>
<button onclick="Loader.boot()">Loader.boot()</button>
<button onclick="Loader.destroy(document.body)">Loader.destroy()</button>
<hr>
<div bx-name="demo/components/foo" class="foo"></div>

CSS

.foo {
    padding: 10px;
    border: 1px solid #E6E6E6;
}

JavaScript

// 组件模板
define('demo/components/foo.tpl', function() {
    return `<h1>moduleId: <%= options.moduleId %></h1>
            <p>content: <%= options.content %></p>
			<pre>options: <%= JSON.stringify( options, null, 4 ) %></pre>`
})

// 组件模块
define('demo/components/foo', [
        'jquery', 'underscore',
        'brix/base',
        'demo/components/foo.tpl'
    ],
    function($, _, Brix, template) {
        return Brix.extend({
            options: {
                content: 'hello'
            },
            init: function() {},
            render: function() {
                var html = _.template(template)({
                	options: this.options
                })
                $(this.element).html(html)
                
                this.on('ready destroy', function(event){
					console.log(event)
                })
            }
        })
    }
)

require(['jquery', 'brix/loader'], function($, Loader) {
    window.Loader = Loader
    $(function() {
        // Loader.boot()
        // Loader.destroy(document.body)
    })
})