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>

JavaScript

var MyItem = Sqimitive.Sqimitive.extend()

var MyList = Sqimitive.Sqimitive.extend({
  // el задавать не обязательно, по умолчанию это простой <div>.
  // В классах, которым элемент DOM ни к чему, его лучше отключить, как здесь,
  // чтобы не гонять зря циклы процессора.
  el: false,

  // Некая абстрактная модель, в этом примере детали нам не важны.
  _childClass: MyItem,
})

var MyViewItem = Sqimitive.Sqimitive.extend({
  el: {tagName: 'li'},

  _opt: {
    model: null,    // MyItem.
    // Точка привязки this.el к родительскому элементу. Описание ниже.
    attachPath: '.',
  },

  events: {
    change_model: function (newModel, oldModel) {
      oldModel && oldModel.off(this)

      // Предполагается, что модель содержится в некоем владеющем списке - в этом случае
      // при удалении её из него удаляем и её представление. MyList именно такой список.
      // Если же список не владеющий - нужно слушать его событие unnested.
      newModel.on({
        change: 'render',

        // remove - стандартный метод, удаляет объект из своего родителя вместе
        // с его el (unnest делает то же самое, но оставляет el где он есть).
        // Так как on вызывается с контекстом this (3-й параметр), то и remove
        // в ответ на -unnest модели будет вызван на объекте MyViewItem.
        '-unnest': 'remove',
      }, this)
    },

    unnest: function () {
      // Теоретически это делать не обязательно - можно обновлять MyViewItem и
      // после его ухода со сцены (удаления из родителя). Но можем сэкономить
      // память и такты, отключив его явно, когда он больше не нужен.
      this.get('model') && this.get('model').off(this)
    },

    render: function () {
      this.el.html('MyViewItem')
    },
  },
})

var MyViewList = Sqimitive.Sqimitive.extend({
  el: {tagName: 'ul'},
  _childClass: MyViewItem,

  _opt: {
    list: null,   // MyList.
  },

  events: {
    change_list: function (newList, oldList) {
      oldList && oldList.off(this)
     ...