Make the panel be another element via `el` attribute

src/panels/view/PanelView.js

@@ -85,20 +85,20 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    const el = this.$el;
+    const $el = this.$el;
-    const pfx = this.ppfx;
+    const ppfx = this.ppfx;
-    el.attr('class', `${this.className} ${pfx}one-bg`);
+    const cls = `${this.className} ${this.id} ${ppfx}one-bg`;
-    this.id && el.attr('id', this.id);
+    $el.addClass(cls);
 
     if (this.buttons.length) {
       var buttons = new ButtonsView({
         collection: this.buttons,
         config: this.config
       });
-      el.append(buttons.render().el);
+      $el.append(buttons.render().el);
     }
 
-    el.append(this.model.get('content'));
+    $el.append(this.model.get('content'));
     return this;
   }
 });

src/panels/view/PanelsView.js

@@ -32,15 +32,20 @@ module.exports = Backbone.View.extend({
    * @private
    * */
   addToCollection(model, fragmentEl) {
-    var fragment = fragmentEl || null;
+    const fragment = fragmentEl || null;
-    var view = new PanelView({
+    const config = this.config;
+    const el = model.get('el');
+    const view = new PanelView({
+      el,
       model,
-      config: this.config
+      config
     });
-    var rendered = view.render().el;
+    const rendered = view.render().el;
-    var appendTo = model.get('appendTo');
+    const appendTo = model.get('appendTo');
 
-    if (appendTo) {
+    // Do nothing if the panel was requested to be another element
+    if (el) {
+    } else if (appendTo) {
       var appendEl = document.querySelector(appendTo);
       appendEl.appendChild(rendered);
     } else {
@@ -56,15 +61,12 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    var fragment = document.createDocumentFragment();
+    const $el = this.$el;
-    this.$el.empty();
+    const frag = document.createDocumentFragment();
-
+    $el.empty();
-    this.collection.each(function(model) {
+    this.collection.each(model => this.addToCollection(model, frag));
-      this.addToCollection(model, fragment);
+    $el.append(frag);
-    }, this);
+    $el.attr('class', this.className);
-
-    this.$el.append(fragment);
-    this.$el.attr('class', this.className);
     return this;
   }
 });