Skip to content

Instantly share code, notes, and snippets.

@kevmeister68
Created July 7, 2015 04:45

Revisions

  1. kevmeister68 created this gist Jul 7, 2015.
    16 changes: 16 additions & 0 deletions app.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    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;
    }
    }
    5 changes: 5 additions & 0 deletions inner-element.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <template>

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

    </template>
    73 changes: 73 additions & 0 deletions inner-element.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    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" );
    }
    }


    74 changes: 74 additions & 0 deletions outer-element.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    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" );
    }
    }


    5 changes: 5 additions & 0 deletions outer-element2.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <template>

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

    </template>
    73 changes: 73 additions & 0 deletions outer-element2.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    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" );
    }
    }


    37 changes: 37 additions & 0 deletions test.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    <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>
    8 changes: 8 additions & 0 deletions test.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    import {inject} from 'aurelia-framework';

    export class TestViewModel
    {
    constructor( )
    {
    }
    }