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({
  // Какой-то набор атрибутов данной модели.
  _opt: {
    complete: false,
    something: 'bar',
  },
})

var MyCollection = Sqimitive.Sqimitive.extend({
  _childClass: MyItem,
  _childEvents: ['change', 'foobar'],

  _opt: {
    // Сделаем так, чтобы коллекция не допускала объекты с !complete.
    allowIncomplete: false,
  },

  events: {
    // Опция изменилась - перепроверим всё, что вложено.
    change_allowIncomplete: function (newValue) {
      newValue || this.each(this._checkComplete, this)
    },

    // Вложенный объект изменился - перепроверим его.
    '.change': '_checkComplete',

    // Добавили новый объект - проверим, что с ним.
    '+nest': '_checkComplete',
  },

  _checkComplete: function (sqim) {
    if (!this.get('allowIncomplete') && !sqim.get('complete')) {
      throw 'This collection only allows complete items!'
    }
  },
})

var col = new MyCollection

var item1 = new MyItem
try {
  col.nest(item1)
    // exception
} catch (e) {
  alert(e)
}

var item2 = new MyItem({complete: true})
col.nest(item2)
alert('okay')
  // okay

try {
  item2.set('complete', false)
    // exception
} catch (e) {
  alert(e)
}