Update attribute update in components

src/dom_components/model/Component.js

@@ -250,7 +250,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
      * @private
      */
     attrUpdated() {
-      this.setAttributes(this.get('attributes'));
+      this.setAttributes(this.get('attributes'), { silent: 1 });
     },
 
     /**
@@ -273,7 +273,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       style && this.setStyle(style);
       delete attrs.style;
 
-      this.set('attributes', attrs, { silent: 1 });
+      this.set('attributes', attrs, opts);
       const attrPrev = { ...this.previous('attributes') };
       const diff = shallowDiff(attrPrev, attrs);
       keys(diff).forEach(pr => this.trigger(`change:attributes:${pr}`));
@@ -435,6 +435,16 @@ const Component = Backbone.Model.extend(Styleable).extend(
       return removed;
     },
 
+    /**
+     * Returns component's classes as an array of strings
+     * @return {Array}
+     */
+    getClasses() {
+      const attr = this.getAttributes();
+      const classStr = attr.class;
+      return classStr ? classStr.split(' ') : [];
+    },
+
     initClasses() {
       const event = 'change:classes';
       const toListen = [this, event, this.initClasses];

src/dom_components/view/ComponentView.js

@@ -26,7 +26,7 @@ module.exports = Backbone.View.extend({
     this.classe = this.attr.class || [];
     const $el = this.$el;
     this.listenTo(model, 'change:style', this.updateStyle);
-    this.listenTo(model, 'change:attributes', this.updateAttributes);
+    this.listenTo(model, 'change:attributes', this.renderAttributes);
     this.listenTo(model, 'change:highlightable', this.updateHighlight);
     this.listenTo(model, 'change:status', this.updateStatus);
     this.listenTo(model, 'change:state', this.updateState);
@@ -223,15 +223,7 @@ module.exports = Backbone.View.extend({
    * @private
    * */
   getClasses() {
-    var attr = this.model.get('attributes'),
-      classes = attr['class'] || [];
-    classes = isArray(classes) ? classes : [classes];
-
-    if (classes.length) {
-      return classes.join(' ');
-    } else {
-      return null;
-    }
+    return this.model.getClasses().join(' ');
   },
 
   /**
@@ -240,17 +232,14 @@ module.exports = Backbone.View.extend({
    * */
   updateAttributes() {
     const model = this.model;
-    const attrs = { 'data-gjs-type': model.get('type') || 'default' };
-    const attr = model.get('attributes');
-    const src = model.get('src');
-
-    for (let key in attr) {
-      attrs[key] = attr[key];
-    }
-
-    src && (attrs.src = src);
-    this.$el.attr(attrs);
-    this.updateHighlight();
+    const defaultAttr = {
+      'data-gjs-type': model.get('type') || 'default',
+      'data-highlightable': model.get('highlightable') ? 1 : ''
+    };
+    this.$el.attr({
+      ...defaultAttr,
+      ...model.getAttributes()
+    });
     this.updateStyle();
   },
 

src/selector_manager/view/ClassTagView.js

@@ -95,6 +95,7 @@ module.exports = require('backbone').View.extend({
   removeTag(e) {
     const { em, model } = this;
     const sel = em && em.getSelected();
+    // Prevent weird erros on remove
     sel && setTimeout(() => sel.getSelectors().remove(model));
   },
 

test/specs/dom_components/view/ComponentV.js

@@ -131,7 +131,7 @@ module.exports = {
         fixtures.innerHTML = '';
         fixtures.appendChild(view.render().el);
         expect(view.$el.html()).toEqual(
-          '<span data-gjs-type="default" data-highlightable="1"></span><div data-gjs-type="default" title="test" data-highlightable="1"></div>'
+          '<span data-gjs-type="default" data-highlightable="1"></span><div data-gjs-type="default" data-highlightable="1" title="test"></div>'
         );
       });