Add 2 experimental options to LayerManager

src/navigator/config/config.js

@@ -34,5 +34,29 @@ export default {
   scrollLayers: { behavior: 'auto', block: 'nearest' },
 
   // Highlight when a layer component is hovered
-  highlightHover: 1
+  highlightHover: 1,
+
+  /**
+   * WARNING: Experimental option
+   * A callback triggered once the component layer is initialized.
+   * Useful to trigger updates on some component prop change.
+   * @example
+   * onInit({ component, render, listenTo }) {
+   *  listenTo(component, 'change:some-prop', render);
+   * };
+   */
+  onInit: () => {},
+
+  /**
+   * WARNING: Experimental option
+   * A callback triggered once the component layer is rendered.
+   * A callback useful to update the layer DOM on some component change
+   * @example
+   * onRender({ component, el }) { // el is the DOM of the layer
+   *  if (component.get('some-prop')) {
+   *    // do changes using the `el` DOM
+   *  }
+   * }
+   */
+  onRender: () => {}
 };

src/navigator/view/ItemView.js

@@ -1,4 +1,4 @@
-import { isUndefined, isString } from 'underscore';
+import { isUndefined, isString, bindAll } from 'underscore';
 import { getModel } from 'utils/mixins';
 import Backbone from 'backbone';
 import ComponentView from 'dom_components/view/ComponentView';
@@ -61,9 +61,12 @@ export default Backbone.View.extend({
   },
 
   initialize(o = {}) {
+    bindAll(this, '__render');
     this.opt = o;
     this.level = o.level;
-    this.config = o.config;
+    const config = o.config || {};
+    const { onInit } = config;
+    this.config = config;
     this.em = o.config.em;
     this.ppfx = this.em.get('Config').stylePrefix;
     this.sorter = o.sorter || '';
@@ -94,6 +97,11 @@ export default Backbone.View.extend({
     this.$el.data('model', model);
     this.$el.data('collection', components);
     model.viewLayer = this;
+    onInit.bind(this)({
+      component: model,
+      render: this.__render,
+      listenTo: this.listenTo
+    });
   },
 
   getVisibilityEl() {
@@ -419,6 +427,13 @@ export default Backbone.View.extend({
     this.updateOpening();
     this.updateStatus();
     this.updateVisibility();
+    this.__render();
     return this;
+  },
+
+  __render() {
+    const { model, config, el } = this;
+    const { onRender } = config;
+    onRender.bind(this)({ component: model, el });
   }
 });