Model and returned html issue

I have below code to create custom component and wants to retrieve updated html via editor.html() but return wrong html, I am sure I am missing something again.

we need below template returned [482](https://github.com/artf/grapesjs/issues/482)
Codeplex: [Template](http://codepen.io/kmpdev/full/LORdOM/)

`function createPCBoxComp(comps, defaultModel, defaultView) {

    comps.addType('pcBox', {
      // Define the Model
      model: defaultModel.extend({
        // Extend default properties
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          droppable: false,
          void: 0,
          src: '',
          hoverText: 'Link to curriculum page',
          title: ' Curriculum Link',
          a_href: 'https://team.global.test/sites/testUni',
          target: '_blank',

          traits: [{
              type: 'text',
              label: 'Hover Text',
              name: 'hoverText',
              placeholder: 'eg. Link to curriculum page',
              changeProp: 1,
            },
            {
              type: 'text',
              label: 'Title(at bottom of image)',
              name: 'title',
              placeholder: 'eg. Curriculum Link',
              changeProp: 1,
            }, {
              type: 'text',
              label: 'Link to open',
              name: 'a_href',
              placeholder: 'eg. https://team.global.test/sites/testUni',
              changeProp: 1,
            }, {
              type: 'select',
              label: 'Target',
              name: 'target',
              options: [{
                  value: '_parent',
                  name: 'This Window'
                },
                {
                  value: '_blank',
                  name: 'New Window'
                },
              ],
              changeProp: 1,
            },
            {
              type: 'text',
              label: 'Image Source',
              name: 'src',
              placeholder: 'eg. https://team.global.test/sites/LearningDevLib/test%20portal%20deliverables%20%20approved/2.%20Business%20and%20Role%20Specific/7.test%20technology/Assets_pics_graphics/t3.1_test_engineering/test_tools_training.jpg',
              changeProp: 1,
            },
          ],
        }),


        initialize(o, opt) {
          defaultModel.prototype.initialize.apply(this, arguments);
          var attr = this.get('attributes');
          if (attr.title)
            this.set('title', attr.title);
          if (attr.a_href)
            this.set('title', attr.a_href);
          if (attr.target)
            this.set('title', attr.target);
          if (attr.hoverText)
            this.set('title', attr.hoverText);
          if (attr.src)
            this.set('title', attr.src);
        },

        getAttrToHTML(...args) {
          var attr = defaultModel.prototype.getAttrToHTML.apply(this, args);
          var src = this.get('src');
          if (src)
            attr.src = src;
          var title = this.get('title');
          if (title)
            attr.title = title;
          var a_href = this.get('a_href');
          if (a_href)
            attr.a_href = a_href;
          var target = this.get('target');
          if (target)
            attr.target = target;
          var hoverText = this.get('hoverText');
          if (hoverText)
            attr.hoverText = hoverText;
          return attr;
        }

      }, {
        isComponent(el) {
          if ((el.getAttribute &&
              el.getAttribute('data-gjs-type') == 'pcBox') || el.className === 'cust-section') {
            return {
              type: 'pcBox'
            };
          }
        }
      }),

      // Define the View
      view: defaultView.extend({

        tagName: 'a',
        events: {
          'dblclick': 'openModal',
          'click': 'initResize',
        },

        initialize(o) {
          defaultView.prototype.initialize.apply(this, arguments);
          this.listenTo(this.model, 'change:target', this.updateTarget);
          this.listenTo(this.model, 'change:title', this.updateTitle);
          this.listenTo(this.model, 'change:hoverText', this.updateHoverText);
          this.listenTo(this.model, 'change:a_href', this.updateLink);
          this.listenTo(this.model, 'active', this.openModal);
          this.listenTo(this.model, 'dblclick active', this.openModal);
          this.listenTo(this.model, 'change:src', this.updateSrc);

          this.classEmpty = this.ppfx + 'plh-pc-box';
          if (this.config.modal)
            this.modal = this.config.modal;

          if (this.config.am)
            this.am = this.config.am;
        },

        updateTitle() {
          $(this.el).find('h4').html(this.model.get("title"));
        },
        updateHoverText() {
          $(this.el).find('p.img__description').html(this.model.get("hoverText"));
        },
        updateLink() {
          $(this.el).find('a').attr('href', this.model.get("a_href"));
        },
        updateTarget() {
          $(this.el).find('a').attr('target', this.model.get("target"));
        },
        updateSrc() {
          var src = this.model.get("src");
          $(this.el).find("img.img__img").attr('src', src);
          if (!src)
            $(this.el).find("img.img__img").addClass(this.classEmpty);
          else
            $(this.el).find("img.img__img").removeClass(this.classEmpty);
        },

        openModal(e) {
          var em = this.opts.config.em;
          var editor = em ? em.get('Editor') : '';

          if (editor) {
            editor.runCommand('open-assets', {
              target: this.model,
              onSelect() {
                editor.Modal.close();
                editor.AssetManager.setTarget(null);
              }
            });
          }
        },
        disableClick() {
          this.preventDefault();
        },
        render(...args) {
          this.updateAttributes();
          this.updateClasses();
          var tempTemplate = "<div class=img__wrap><img class=img__img src=" + this.model.get("src") + "><p class=img__description>" + this.model.get("hoverText") + "</div><h4>" + this.model.get("title") + "</h4>";
          var template = "<a href=" + this.model.get("a_href") + " target=" + this.model.get("target") + " onclick='event.preventDefault()'>" + tempTemplate + "</a>"

          this.el.className = "pcBox";
          this.el.innerHTML = (template);
          return this;
        }
      })
    });
  };
` 
while getting html from editor.html(), I get html with attribute added at root(div) but I need individual attribute applied at correct as per image 2
it return below html

![capture](https://user-images.githubusercontent.com/11716808/32724388-01dfb8dc-c869-11e7-8a5d-d428639a144e.PNG)


but I need below html

 
![capture](https://user-images.githubusercontent.com/11716808/32724402-129cc1e2-c869-11e7-96bd-43f286e642a9.PNG)