i-bem-dom: Rethink events

[veged]

Right now there are too many ways to use bem-events (directly and indirectly). We should rethink API.

Current state

• MyBlock.on('click', ...) -- bind to all instances of MyBlock
• MyBlock.on(domElem, 'click', ...) -- bind to all instances of MyBlock inside or on domElem
• AnotherBlock.liveInitOnBlockInsideEvent(MyBlock, 'click', ...) -- bind to all instances of MyBlock inside all instances of AnotherBlock
• AnotherBlock.liveInitOnBlockEvent(MyBlock, 'click', ...) -- bind to all instances of MyBlock which placed on the same DOM-node as instances of AnotherBlock

[dfilatov]

Proposal

• MyBlock.on('click', ...) -- bind to all instances of MyBlock
• remove ugly first optional param from MyBlock.on
• introduce MyBlock.whenInside with two possible ways of usage:
  • MyBlock.whenInside(domElem, 'click', ...) -- bind to all instances of MyBlock inside or on domElem
  • MyBlock.whenInside(AnotherBlock, 'click', ...) -- bind to all instances of MyBlock inside all instances of AnotherBlock
• introduce MyBlock.whenWith(AnotherBlock, 'click', ...) -- bind to all instances of MyBlock which placed on the same DOM-node as instances of AnotherBlock

Proposal 2

Unify ALL events (BEM/DOM, live/instance). Pros:

• reduce hellish number of different ways to work with events
• ability to unbind from all types of events on destruct automatically

Cons:

• little bit more verbose syntax for trivial cases

BEM

• get rid of .on, .un and .emit in favour of .events().on, .events().un, .events().emit
• MyBlock.events().on('bem-event', ...) -- bind to all instances of MyBlock
• remove ugly first optional param from MyBlock.on(...
• add ability to use once everywhere

For instances

• this.events(AnotherBlock).on('bem-event', ...) -- bind to all instances of AnotherBlock inside or on instance of entity
• this.events(Elem | 'elem' | elem | elemCollection | block | blockCollection).on('click', ...) -- bind to all instances of entities inside or on instance of entity
• this.events(Elem | 'elem' | elem | elemCollection | block | blockCollection, Elem | 'elem' | elem | elemCollection).on('click', ...) -- bind to all instances of entities inside or on elem/elems.

For classes

• this.events(AnotherBlock).on('bem-event', ...) -- bind to all instances of AnotherBlock inside or on all instances of class.
• this.events(Elem | 'elem').on('bem-event', ...) -- bind to all instances of elems inside or on instance of entity
• get rid of liveInitOnBlockEvent, liveInitOnBlockInsideEvent

DOM

• add ability to use once everywhere

For instances

• this.domEvents().on('dom-event', ...) -- bind to DOM event on domElem of entity instance
• this.domEvents(Elem | 'elem' | elem | elemCollection).on('dom-event', ...) -- bind to DOM event on domElem of all instances of given entities
• this.domEvents(window | document).on('dom-event', ...) -- bind to DOM event on window or document
• get rid of bindTo*/unbindFrom* methods

For classes

• this.domEvents().on('dom-event', ...) -- bind to DOM event on domElem of all instances of class
• this.domEvents(Elem | 'elem').on('dom-event', ...) -- bind to DOM event on domElem of given entities of all instances of class
• get rid of liveBindTo*/liveUnbindFrom* / liveInitOnEvent methods

[L0stSoul]

hi!

MyBlock.whenInside(AnotherBlock, 'click', ...) -bind to all instances of MyBlock inside all instances of AnotherBlock introduce MyBlock.whenWith(AnotherBlock, 'click', ...) -- bind to all instances of MyBlock which placed on the same DOM-node as instances of AnotherBlock

I think such methods really dangerous because it's introduce a strogner dependencies between blocks. in such cases better use mods i think.

But, proposal two looks really nice. thx.

[veged]

We doesn't introduce any new ways for make strong dependencies between blocks — we just propose new (more clean) API for ways that already exists.

[L0stSoul]

IMHO

yeah you can do things like this right now. But it would be look ugly, and you may know that you do something dangerous, or wrong.

Clean built-in method for this purpose tell us - oh it's ok! do things like this. know you parents, do different thing depending on in wchich parent you are. it's perfectly normal.

And in general it's not.

[veged]

I believe that strategy for safe from produce not unambiguous code is not "ugly API" but educate about pros and cons ;-)

[qfox]

@L0stSoul Just to clarify. Please can you propose some "good API" for this? Probably you are right at some points.

[qfox]

I've stuck at re-emitting event and thinking about rewriting target with current element(elemInstance) or block.

function onSubblockEvent(e, data) {
  // some data fills
  this.emit(e, data); // here we can place some property with a link to this
}

It's pretty similar to target, relatedTarget, originalTarget but in blocks/elements terminology.

[narqo]

Done with #977. The final API is:

• this._domEvents([event context]).on('dom-event', handler)
• this._events([event context]).on('event', handler)
• this._emit('event', data)