How to use the aurelia-framework.ViewSlot function in aurelia-framework

recreateViewSlots() {
    var rows = this.htmlCache.rowsArray;
    for (var i = 0; i < rows.length; i++) {
      rows[i].viewSlot.unbind();
      rows[i].viewSlot.detached();
      rows[i].viewSlot.removeAll();
      rows[i].viewSlot = null;
      rows[i].div.innerHTML = "";
      this.htmlCache.rowTemplate = null;
      var viewFactory = this.vGrid.viewCompiler.compile('<template>' + this.getRowTemplate(this.vGridConfig.attributeArray) + '</template>', this.vGrid.resources);
      var view = viewFactory.create(this.vGrid.container);
      rows[i].viewSlot = new ViewSlot(rows[i].div, true);
      rows[i].viewSlot.add(view);
      let bindingContext = {};
      rows[i].viewSlot.bind(bindingContext, {bindingContext:bindingContext, parentOverrideContext: this.vGrid.overrideContext});
      rows[i].viewSlot.attached();
    }
  }

//create and append header div
    this.htmlCache.header = document.createElement("DIV");
    this.htmlCache.header.className = this.vGridConfig.css.mainHeader;
    this.htmlCache.header.style.height = this.vGridConfig.headerHeight + "px";
    this.htmlCache.grid.appendChild(this.htmlCache.header);

    var row = document.createElement("DIV");
    row.className = this.vGridConfig.css.row + " " + this.vGridConfig.css.rowHeader;
    //row.style.top = top + "px";
    row.style.height = this.vGridConfig.headerHeight + "px";
    row.style.width = this.getTotalColumnWidth() + "px";
    this.htmlCache.header.appendChild(row);

    var viewFactory = this.vGrid.viewCompiler.compile('<template>' + this.getHeaderTemplate() + '</template>', this.vGrid.resources);
    var view = viewFactory.create(this.vGrid.container);
    this.headerViewSlot = new ViewSlot(this.htmlCache.header.firstChild, true);
    this.headerViewSlot.add(view);
    let bindingContext = {};
    this.headerViewSlot.bind(bindingContext, {bindingContext:bindingContext, parentOverrideContext: this.vGrid.overrideContext});
    this.headerViewSlot.attached();


  };

createLoadingScreen(){
    var loadingScreentHtml = [
      '<div class="v-grid-overlay">',
      '</div>',
      '<div class="v-grid-progress-indicator">',
      '<div style="width:100%" role="progressbar" class="v-grid-progress-bar">',
      '<span>${ loadingMessage }</span>',
      '</div>',
      '</div>'
    ];


    var viewFactory = this.vGrid.viewCompiler.compile('<template>' + loadingScreentHtml.join("") + '</template>', this.vGrid.viewResources);
    var view = viewFactory.create(this.vGrid.container);

    this.headerViewSlot = new ViewSlot(this.htmlCache.grid, true);
    this.headerViewSlot.add(view);

    //bind

    this.headerViewSlot.bind(this.vGrid, {
      bindingContext: this.vGrid,
      parentOverrideContext: this.vGrid.overrideContext
    });
    this.headerViewSlot.attached();
  }

switch (this.colType()) {
      case "image":
        var viewFactory = this.vGrid.viewCompiler.compile('<template><img></template>', this.vGrid.resources);
        break;
      case "checkbox":
        var viewFactory = this.vGrid.viewCompiler.compile('<template><input></template>', this.vGrid.resources);
        break;
      case "selection":
        var viewFactory = this.vGrid.viewCompiler.compile('<template><input></template>', this.vGrid.resources);
        break;
      default:
        var viewFactory = this.vGrid.viewCompiler.compile('<template><input></template>', this.vGrid.resources);
    }

    var view = viewFactory.create(this.container);
    this.viewSlot = new ViewSlot(this.element, true);
    this.viewSlot.add(view);
    this.viewSlot.bind(this);
    this.viewSlot.attached();

    //focus event for setting
    this.element.addEventListener("cellFocus", function (e) {
      this.setCss();
    }.bind(this));


    this.element.addEventListener("eventOnRowDblClick",function (e) {
      if(this.vGrid.vGridConfig.eventOnRowDblClick){
        this.vGrid.vGridConfig.eventOnRowDblClick({
          evt:e,
          data:this.vGrid.vGridCollectionFiltered[this.vGrid.vGridCurrentRow],
          attribute:this.attribute(),

Footer.prototype.init = function (overrideContext, footerStringTemplate) {
        this.overrideContext = overrideContext;
        var footerTemplate = footerStringTemplate || "".replace(/\$(au{)/g, '${');
        var viewFactory = this.viewCompiler.compile("<template>\n      " + footerTemplate + "\n      </template>", this.viewResources);
        var view = viewFactory.create(this.container);
        var footerViewSlot = new aurelia_framework_1.ViewSlot(this.htmlCache.avg_footer, true);
        footerViewSlot.add(view);
        footerViewSlot.bind(this, {
            bindingContext: this,
            parentOverrideContext: this.overrideContext
        });
        footerViewSlot.attached();
        this.viewSlots.footerViewSlot = footerViewSlot;
    };
    return Footer;

createLoadingScreenViewSlot() {

    var loadingScreentHtml = [
      '<div class="v-grid-overlay">',
      '</div>',
      '<div class="v-grid-progress-indicator">',
      '<div style="width:100%" role="progressbar" class="v-grid-progress-bar">',
      '<span>${ loadingMessage }</span>',
      '</div>',
      '</div>'
    ];
    var viewFactory = this.vGrid.viewCompiler.compile('<template>' + loadingScreentHtml.join("") + '</template>', this.vGrid.viewResources);
    var view = viewFactory.create(this.vGrid.container);
    this.loadingScreenViewSlot = new ViewSlot(this.gridElement, true);
    this.loadingScreenViewSlot.add(view);
    //bind
    this.loadingScreenViewSlot.bind(this.vGrid, {
      bindingContext: this.vGrid,
      parentOverrideContext: this.vGrid.overrideContext
    });
    this.loadingScreenViewSlot.attached();
  }

compile(element, ctx = null,viewSlot = null,templateOrFragment=null) {
    element.classList.remove('au-target');

    if(!templateOrFragment){
      var templateOrFragment = document.createDocumentFragment();
      var c = document.createElement("div");
      c.innerHTML = element.innerHTML;
      templateOrFragment.appendChild(c);
    }
    var view = this.viewCompiler.compile(templateOrFragment, this.resources).create(this.container, ctx);

    if(!viewSlot) viewSlot = new ViewSlot(element, true);

    viewSlot.add(view);
    viewSlot.attached();
    return viewSlot;
  }

createFooterViewSlot() {
    var viewFactory = this.vGrid.viewCompiler.compile('<template></template>', this.vGrid.viewResources);
    var view = viewFactory.create(this.vGrid.container);

    this.footerViewSlot = new ViewSlot(this.footerElement, true);
    this.footerViewSlot.add(view);

    this.footerViewSlot.bind(this, {
      bindingContext: this,
      parentOverrideContext: this.vGrid.overrideContext
    });

    this.footerViewSlot.attached();
  }

value: function bind(executionContext) {
			this.resizeListener = window.addEventListener('resize', this.syncColumnHeadersWithColumns.bind(this));

			this["$parent"] = executionContext;

			if (this.serverPaging && !this.serverSorting) this.sortable = false;

			var tbody = this.element.querySelector("table>tbody");
			this.viewSlot = new _aureliaFramework.ViewSlot(tbody, true, this);

			var row = tbody.querySelector("tr");

			this.addRowAttributes(row);

			this.rowTemplate = document.createDocumentFragment();
			this.rowTemplate.appendChild(row);

			this.buildTemplates();
		}
	}, {

recreateViewSlots() {
    var rows = this.htmlCache.rowsArray;
    for (var i = 0; i < rows.length; i++) {
      rows[i].viewSlot.unbind();
      rows[i].viewSlot.detached();
      rows[i].viewSlot.removeAll();
      rows[i].viewSlot = null;
      rows[i].div.innerHTML = "";
      this.htmlCache.rowTemplate = null;
      var viewFactory = this.vGrid.viewCompiler.compile('<template>' + this.getRowTemplate(this.vGridConfig.attributeArray) + '</template>', this.vGrid.resources);
      var view = viewFactory.create(this.vGrid.container);
      rows[i].viewSlot = new ViewSlot(rows[i].div, true);
      rows[i].viewSlot.add(view);
      let bindingContext = {};
      rows[i].viewSlot.bind(bindingContext);
      rows[i].viewSlot.attached();
    }
  }