aurelia/templating repro - issue #127.

app.js

import 'bootstrap';
import 'bootstrap/css/bootstrap.css!';

export class App {
  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
      { route: ['','welcome'],  moduleId: './welcome',      nav: true,  title:'Welcome' },
      { route: 'flickr',        moduleId: './flickr',       nav: true,  title:'Flickr' },
      { route: 'child-router',  moduleId: './child-router', nav: true,  title:'Child Router' },
      { route: 'test',          moduleId: './test',         nav: false, title:'Test' }
    ]);

    this.router = router;
  }
}

inner-element.html

<template>

   <p>I AM: The Inner Element</p>

</template>

inner-element.js

import {inject, customElement, noView} from 'aurelia-framework';
import {LogManager} from 'aurelia-framework';

@customElement( "test-inner-element" )
@inject( Element )                           // DOM element that this class will be attached to (though it's meant to be "non-visual") 
export class TestInnerElement
{
   constructor( element ) 
   {
      this.id = "InnerTestElement";

      this.element = element;
      this.logger = LogManager.getLogger( "test" );

      this.logger.info( "TestInnerElement entered" );
   }

   canActivate( params, routeConfig )
   {
      // Implement this hook if you want to control whether or not your view-model can be navigated to. Return a boolean value, a promise for a boolean value, or a navigation command.

      this.logger.info( "TestInnerElement.canActivate entered" );

      return true;
   }
   
   activate( params, routeConfig )
   {
      // Implement this hook if you want to perform custom logic just before your view-model is displayed. You can optionally return a promise to tell the router to wait to bind and attach the view until after you finish your work.

      this.logger.info( "TestInnerElement.activate entered" );
   }

   canDeactivate( ) 
   {
      // Implement this hook if you want to control whether or not the router can navigate away from your view-model when moving to a new route. Return a boolean value, a promise for a boolean value, or a navigation command.

      this.logger.info( "TestInnerElement.canDeactivate entered" );

      return true;
   }

   deactivate( )
   {
      // Implement this hook if you want to perform custom logic when your view-model is being navigated away from. You can optionally return a promise to tell the router to wait until after your finish your work.

      this.logger.info( "TestInnerElement.deactivate entered" );
   }

   // binding stuff

   bind( bindingContext )
   {
      this.logger.info( "TestInnerElement.bind entered" );
   }

   unbind( )
   {
      this.logger.info( "TestInnerElement.unbind entered" );
   }

   attached( )
   {
      this.logger.info( "TestInnerElement.attached entered" );
   }

   detached( )
   {
      this.logger.info( "TestInnerElement.detached entered" );
   }
}

outer-element.js

import {inject, customElement, noView} from 'aurelia-framework';
import {LogManager} from 'aurelia-framework';

@noView
@customElement( "test-outer-element" )
@inject( Element )                           // DOM element that this class will be attached to (though it's meant to be "non-visual") 
export class TestOuterElement
{
   constructor( element ) 
   {
      this.id = "TestOuterElement";

      this.element = element;
      this.logger = LogManager.getLogger( "test" );

      this.logger.info( "TestOuterElement entered" );
   }

   canActivate( params, routeConfig )
   {
      // Implement this hook if you want to control whether or not your view-model can be navigated to. Return a boolean value, a promise for a boolean value, or a navigation command.

      this.logger.info( "TestOuterElement.canActivate entered" );

      return true;
   }
   
   activate( params, routeConfig )
   {
      // Implement this hook if you want to perform custom logic just before your view-model is displayed. You can optionally return a promise to tell the router to wait to bind and attach the view until after you finish your work.

      this.logger.info( "TestOuterElement.activate entered" );
   }

   canDeactivate( ) 
   {
      // Implement this hook if you want to control whether or not the router can navigate away from your view-model when moving to a new route. Return a boolean value, a promise for a boolean value, or a navigation command.

      this.logger.info( "TestOuterElement.canDeactivate entered" );

      return true;
   }

   deactivate( )
   {
      // Implement this hook if you want to perform custom logic when your view-model is being navigated away from. You can optionally return a promise to tell the router to wait until after your finish your work.

      this.logger.info( "TestOuterElement.deactivate entered" );
   }

   // binding stuff

   bind( bindingContext )
   {
      this.logger.info( "TestOuterElement.bind entered" );
   }

   unbind( )
   {
      this.logger.info( "TestOuterElement.unbind entered" );
   }

   attached( )
   {
      this.logger.info( "TestOuterElement.attached entered" );
   }

   detached( )
   {
      this.logger.info( "TestOuterElement.detached entered" );
   }
}

outer-element2.html

<template>

   <content select="*"></content>

</template>

outer-element2.js

import {inject, customElement, noView} from 'aurelia-framework';
import {LogManager} from 'aurelia-framework';

@customElement( "test-outer-element2" )
@inject( Element )                           // DOM element that this class will be attached to (though it's meant to be "non-visual") 
export class TestOuterElement2
{
   constructor( element ) 
   {
      this.id = "TestOuterElement";

      this.element = element;
      this.logger = LogManager.getLogger( "test" );

      this.logger.info( "TestOuterElement entered" );
   }

   canActivate( params, routeConfig )
   {
      // Implement this hook if you want to control whether or not your view-model can be navigated to. Return a boolean value, a promise for a boolean value, or a navigation command.

      this.logger.info( "TestOuterElement.canActivate entered" );

      return true;
   }
   
   activate( params, routeConfig )
   {
      // Implement this hook if you want to perform custom logic just before your view-model is displayed. You can optionally return a promise to tell the router to wait to bind and attach the view until after you finish your work.

      this.logger.info( "TestOuterElement.activate entered" );
   }

   canDeactivate( ) 
   {
      // Implement this hook if you want to control whether or not the router can navigate away from your view-model when moving to a new route. Return a boolean value, a promise for a boolean value, or a navigation command.

      this.logger.info( "TestOuterElement.canDeactivate entered" );

      return true;
   }

   deactivate( )
   {
      // Implement this hook if you want to perform custom logic when your view-model is being navigated away from. You can optionally return a promise to tell the router to wait until after your finish your work.

      this.logger.info( "TestOuterElement.deactivate entered" );
   }

   // binding stuff

   bind( bindingContext )
   {
      this.logger.info( "TestOuterElement.bind entered" );
   }

   unbind( )
   {
      this.logger.info( "TestOuterElement.unbind entered" );
   }

   attached( )
   {
      this.logger.info( "TestOuterElement.attached entered" );
   }

   detached( )
   {
      this.logger.info( "TestOuterElement.detached entered" );
   }
}

test.html

<template>
  <require from="./outer-element"></require>
  <require from="./outer-element2"></require>
  <require from="./inner-element"></require>

  <p>[TEST VIEW 1 -- using Outer Element with @noView]</p>

  <test-outer-element>
  
     <p>Some basic HTML markup inside the outer element.</p>

  </test-outer-element>

   
  <p>[TEST VIEW 1 end]</p>

  <p>[TEST VIEW 2 -- using Outer Element with @noView]</p>

  <test-outer-element>
  
     <test-inner-element></test-inner-element>

  </test-outer-element>

  <p>[TEST VIEW 2 end]</p>

  <p>[TEST VIEW 3 -- using Outer Element #2 with Content selector in HTML, no @noView]</p>

  <test-outer-element2>
  
     <test-inner-element></test-inner-element>

  </test-outer-element2>

  <p>[TEST VIEW 3 end]</p>

</template>

test.js

import {inject} from 'aurelia-framework';

export class TestViewModel 
{
  constructor( ) 
  {
  }
}