Browse Source

Don't trigger component hooks for temporary components

pull/1705/head
Artur Arseniev 8 years ago
parent
commit
01c07f3c37
  1. 25
      docs/modules/Components.md
  2. 20
      src/dom_components/model/Component.js
  3. 13
      src/dom_components/view/ComponentView.js
  4. 5
      src/dom_components/view/ComponentsView.js

25
docs/modules/Components.md

@ -10,15 +10,20 @@ The Component is the base element for template composition. It is atomic, so ele
## Built-in components
* Default (Basic)
* Text
* Image
* Video
* Link
* Map
* Table
* Row (for the table)
* Cell (for the table)
* default (Basic)
* wrapper
* text
* textnode
* svg
* script
* image
* video
* label
* link
* map
* table
* row (for the table)
* cell (for the table)
@ -317,7 +322,7 @@ comps.addType('map', {
});
```
## Component Lifecycle Hooks
## Lifecycle Hooks
Each component triggers different lifecycle hooks, which allows you to add custom actions at their specific stages.
We can distinguish 2 different types of hooks: **global** and **local**.

20
src/dom_components/model/Component.js

@ -190,8 +190,11 @@ const Component = Backbone.Model.extend(Styleable).extend(
this.emitUpdate(name, ...args)
);
});
this.init();
em && em.trigger('component:create', this);
if (!opt.temporary) {
this.init();
em && em.trigger('component:create', this);
}
},
/**
@ -959,12 +962,13 @@ const Component = Backbone.Model.extend(Styleable).extend(
emitUpdate(property, ...args) {
const em = this.em;
const event = 'component:update' + (property ? `:${property}` : '');
this.updated(
property,
property && this.get(property),
property && this.previous(property),
...args
);
property &&
this.updated(
property,
property && this.get(property),
property && this.previous(property),
...args
);
this.trigger(event, ...args);
em && em.trigger(event, this, ...args);
},

13
src/dom_components/view/ComponentView.js

@ -18,7 +18,9 @@ module.exports = Backbone.View.extend({
const model = this.model;
const config = opt.config || {};
const em = config.em;
const modelOpt = model.opt || {};
this.opts = opt;
this.modelOpt = modelOpt;
this.config = config;
this.em = em || '';
this.pfx = config.stylePrefix || '';
@ -39,7 +41,7 @@ module.exports = Backbone.View.extend({
model.view = this;
this.initClasses();
this.initComponents({ avoidRender: 1 });
this.init();
!modelOpt.temporary && this.init();
},
/**
@ -361,9 +363,12 @@ module.exports = Backbone.View.extend({
},
postRender() {
const { em, model } = this;
this.onRender();
em && em.trigger('component:mount', model);
const { em, model, modelOpt } = this;
if (!modelOpt.temporary) {
this.onRender();
em && em.trigger('component:mount', model);
}
},
onRender() {}

5
src/dom_components/view/ComponentsView.js

@ -14,18 +14,19 @@ module.exports = Backbone.View.extend({
removeChildren(removed) {
const em = this.config.em;
const view = removed.view;
const temp = removed.opt.temporary;
if (!view) return;
view.remove.apply(view);
const children = view.childrenView;
children && children.stopListening();
removed.components().forEach(this.removeChildren.bind(this));
removed.removed();
!temp && removed.removed();
if (em) {
removed.get('style-signature') &&
em
.get('Commands')
.run('core:component-style-clear', { target: removed });
em.trigger('component:remove', removed);
!temp && em.trigger('component:remove', removed);
}
},

Loading…
Cancel
Save