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>
<div id="el">
  <p>
    <u class="toggle">Toggle</u> •
    <u class="show">Show</u> •
    <u class="hide">Hide</u>
  </p> 
  <p class="contents">-- Contents --</p>
</div>

JavaScript

var MyView = Sqimitive.Sqimitive.extend({
  // Показывает/скрывает элемент. Без аргументов меняет текущее состояние
  // на противоположное.
  toggle: function (state) {
    arguments.length || (state = !this.$('.contents').is(':visible'))
    this.$('.contents').toggle(!!state)
    return this
  },

  elEvents: {
    // Дефисы в маске отбрасывают исходные аргументы. Дефис в конце - удаляется.
    // В результате остаётся пустая маска, которая отбрасывает все аргументы.
    'click .toggle': 'toggle-',

    // jQuery первым параметром передаёт event object, который == true.
    'click .show': 'toggle',

    // 9 параметра jQuery точно не передаёт, поэтому передаётся нечто != true.
    // Дефис отделяет имя метода от маски - без него был бы просто метод toggle9.
    'click .hide': 'toggle-9',
  },
})

;(new MyView({el: $('#el')})).attach()