Render New Html to editor with Action of Traits

=============
I create my new custom tool by:
         this.editor.BlockManager.add('sidebar', {
             id: 'sidebar',
            label: 'SideBar',
            attributes: {class:'fa fa-bullhorn'},
            content: {
                style: {color: 'black'},
                type: 'sidebar',
                         }

        });
=============
and this to add default render html and  traits and excuting some functions on listen to checkbox  :

i want to apppent newDom html  var to the editor on action 

 comps.addType('sidebar', {
            model: defaultModel.extend({
      init() {
                 
                    this.listenTo(this, 'change:business', this.doStuff);
                    this.listenTo(this, 'change:confrences', this.doStuff);
                    this.listenTo(this, 'change:Nuclear', this.doStuff);
                   },

                doStuff() {
        // some java script method 
//the result new html
                 },


                defaults: Object.assign({}, defaultModel.prototype.defaults, {
                    traits: [
                        'Title',

                         // this.catogrylist   ,
                        {
                            type: 'checkbox',
                            label:'business',
                            name:'business',
                            changeProp: 1,


                        },
                        {
                            type: 'checkbox',
                            label:'confrences',
                            name:'confrences',
                            changeProp: 1,

                        },
                        {
                            type: 'checkbox',
                            label:'Nuclear',
                            name:'Nuclear',
                            changeProp: 1,

                        },

                    ],


                }),
            }, {
                isComponent: function(el) {
                    if(el.tagName == 'div'){
                        return {type: 'sidebar'};
                    }
                },
            }),

            view: defaultView.extend({
           tagName: 'div',
                                                                render: function () {
                                                               
                                                                    this.el.innerHTML = ` <div class="categories" style="width:15%;height: 100%;background-color: #4b5257"></div>
            `;
            
                                                                   return this;
                                                                },
                                                            }),

        });