JSFiddle - React, Tailwind, and code Playground

by Proger

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://squizzle.me/js/sqimitive/sqimitive.min.js"></script>

CSS

.loaded { background: yellow; transition: 1s all; }

JavaScript

var MyView = Sqimitive.Sqimitive.extend({
  el: {tag: 'aside', className: 'info'},

  _opt: {
    // Придумаем какой-нибудь флаг.
    loaded: false,
  },

  elEvents: {
    'click .something': '_somethingClicked',
  },

  events: {
    // Обычно флаг обновляется прямо в render. Но мы можем сделать это точечно.
    change_loaded: function (value) {
      this.el.toggleClass('loaded', value)
    },

    render: function () {
      this.el.html('Click <u class="something">here</u>?')
    },
  },

  _somethingClicked: function (e) {
    alert(e.target.tagName + ' clicked!')
  },
})

var view = new MyView({el: $('body')})
view.render().attach()

setTimeout(function () {
  view.set('loaded', true)
}, 3000)