import {Container, inject} from 'aurelia-framework';
import {bindable, ViewCompiler, ViewResources, ViewSlot} from 'aurelia-templating';

@inject(Element, ViewCompiler, ViewResources, Container)
export class MyElement {
  elementProperty = 20;
  
  constructor(element, viewCompiler, viewResources, container) {
    this.element = element;
    this.viewCompiler = viewCompiler;
    this.viewResources = viewResources;
    this.container = container;
    
    this.templateElement = this.element.querySelector('my-template');
  }
  
  created() {
    
  }
  
  attached() {
    if (this.templateElement) {
      this._template = this.templateElement.au.controller.viewModel.template;
      this._templateModel = this.templateElement.au.controller.viewModel.model;
      this.useTemplate();
    }
    
  }
  
  useTemplate() {
    let template = this._template;
    let model = this._templateModel;
    let viewFactory = this.viewCompiler.compile(`<template>${template}</template>`, this.viewResources);
    let view = viewFactory.create(this.container);
    this.viewSlot = new ViewSlot(this.templateTarget, true);
    this.viewSlot.add(view);
    this.viewSlot.bind(this, {
      bindingContext: this,
      parentOverrideContext: model
       });
       
    this.viewSlot.attached();
  }
}