Update navigator items

src/dom_components/view/ComponentTextView.js

@@ -82,8 +82,11 @@ module.exports = ComponentView.extend({
         comps.reset();
         comps.add(content);
         comps.each(model => clean(model));
-        // With rerender is possible to see changes applied after clean
+
+        // With rerender it's possible to see changes applied
+        // after clean method
         this.render();
+        comps.trigger('resetNavigator');
       }
     }
 

src/navigator/view/ItemView.js

@@ -4,16 +4,25 @@ var ItemsView;
 
 module.exports = Backbone.View.extend({
 
+  events: {
+    'mousedown [data-toggle-move]': 'startSort',
+    'click [data-toggle-visible]': 'toggleVisibility',
+    'click [data-toggle-select]': 'handleSelect',
+    'click [data-toggle-open]': 'toggleOpening',
+    'click [data-toggle-edit]': 'handleEdit',
+    'focusout input': 'handleEditEnd',
+  },
+
   template: _.template(`
   <% if (hidable) { %>
-    <i id="<%= prefix %>btn-eye" class="btn fa fa-eye <%= (visible ? '' : 'fa-eye-slash') %>"></i>
+    <i id="<%= prefix %>btn-eye" class="btn fa fa-eye <%= (visible ? '' : 'fa-eye-slash') %>" data-toggle-visible></i>
   <% } %>
 
   <div class="<%= prefix %>title-c">
-    <div class="<%= prefix %>title <%= addClass %>" style="padding-left: <%= 42 + level * 10 %>px">
+    <div class="<%= prefix %>title <%= addClass %>" style="padding-left: <%= 42 + level * 10 %>px" data-toggle-select>
       <div class="<%= prefix %>title-inn">
-        <i class="fa fa-pencil <%= editBtnCls %>"></i>
+        <i class="fa fa-pencil <%= editBtnCls %>" data-toggle-edit></i>
-        <i id="<%= prefix %>caret" class="fa fa-chevron-right <%= caretCls %>"></i>
+        <i id="<%= prefix %>caret" class="fa fa-chevron-right <%= caretCls %>" data-toggle-open></i>
         <%= icon %>
         <input class="<%= ppfx %>no-app <%= inputNameCls %>" value="<%= title %>" readonly>
       </div>
@@ -22,7 +31,7 @@ module.exports = Backbone.View.extend({
 
   <div id="<%= prefix %>counter"><%= (count ? count : '') %></div>
 
-  <div id="<%= prefix %>move">
+  <div id="<%= prefix %>move" data-toggle-move>
     <i class="fa fa-arrows"></i>
   </div>
 
@@ -50,20 +59,8 @@ module.exports = Backbone.View.extend({
     this.inputNameCls = `${ppfx}nav-comp-name`;
     this.caretCls = `${ppfx}nav-item-caret`;
     this.titleCls = `${pfx}title`;
-    this.events = {};
-    this.events[`click #${pfx}btn-eye`] = 'toggleVisibility';
-    this.events['click .' + this.caretCls] = 'toggleOpening';
-    this.events['click .' + this.titleCls] = 'handleSelect';
-    this.events['click .' + this.editBtnCls] = 'handleEdit';
-    this.events['blur .' + this.inputNameCls] = 'handleEditEnd';
-
     this.$el.data('model', model);
     this.$el.data('collection', components);
-
-    if(o.config.sortable)
-      this.events['mousedown  #'+pfx+'move']	= 'startSort';
-
-    this.delegateEvents();
   },
 
   /**

src/navigator/view/ItemsView.js

@@ -14,7 +14,7 @@ module.exports = Backbone.View.extend({
     this.parent = o.parent;
     this.listenTo(this.collection, 'add', this.addTo);
     this.listenTo(this.collection, 'reset resetNavigator', this.render);
-    this.className   = this.pfx + 'items';
+    this.className = this.pfx + 'items';
 
     if (config.sortable && !this.opt.sorter) {
       var pfx = this.pfx;
@@ -65,6 +65,10 @@ module.exports = Backbone.View.extend({
     var fragment  = fragmentEl || null;
     var viewObject  = ItemView;
 
+    if(!this.isCountable(model, this.config.hideTextnode)) {
+      return;
+    }
+
     var view = new viewObject({
       level,
       model,
@@ -115,17 +119,11 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    var fragment = document.createDocumentFragment();
+    const frag = document.createDocumentFragment();
-    this.$el.empty();
+    this.el.innerHTML = '';
-
+    this.collection.each(model => this.addToCollection(model, frag));
-    this.collection.each(function(model) {
+    this.el.appendChild(frag);
-      if(!this.isCountable(model, this.config.hideTextnode))
+    this.$el.attr('class', this.className);
-        return;
-      this.addToCollection(model, fragment);
-    }, this);
-
-    this.$el.append(fragment);
-    this.$el.attr('class', _.result(this, 'className'));
     return this;
   }
 });