page3.html

<template>
  <section class="au-animate">
    <h2>Page 3</h2>

    <p if.bind="special.name"><b>special.name:</b>${special.name}<br></p>
    <p if.bind="special.cool[0].name"><b>special.cool[0].name:</b>${special.cool[0].name}<br></p>
    <p if.bind="special.cool[0].cool[0].name"><b>special.cool[0].cool[0].name:</b>${special.cool[0].cool[0].name}<br></p>
    <p if.bind="special.cool[0].cool[0].cool[0].name"><b>special.cool[0].cool[0].cool[0].name:</b>${special.cool[0].cool[0].cool[0].name}<br></p>
    <p if.bind="special.cool[0].cool[0].cool[0].cool[0].name"><b>special.cool[0].cool[0].cool[0].cool[0].name:</b>${special.cool[0].cool[0].cool[0].cool[0].name}<br></p>
    <p if.bind="special.cool[0].cool[0].cool[0].cool[0].cool[0]"><b>special.cool[0].cool[0].cool[0].cool[0].cool[0]:</b>${special.cool[0].cool[0].cool[0].cool[0].cool[0]}<br></p>
  </section>
</template>

page3.ts

import { inject, customElement, EventAggregator, logger, IComponent } from 'mf';

@logger()
@customElement('page3')
@inject(EventAggregator)
export class Page3 implements IComponent {
    public deps: any[];
    public variable = 'variable';
    public special: any = {
        name: 'me',
        cool: [
            {
                name: 'me',
                cool: [
                    {
                        name: 'me',
                        cool: [
                            {
                                name: 'me',
                                cool: [

                                    {
                                        name: 'me',
                                        cool: ['Im crazy']
                                    }]
                            }]
                    }]
            }]
    };

    constructor(...dependencies) {
        // todo
    }

    @logger
    public async loadTemplate() {
        // todo
        return require('./page3.html');
    }

    @logger
    public created() {
        // todo
        // todo
    }

    @logger
    public detached() {
        // todo
    }

    @logger
    public canDeactivate() {
        // todo
        return true;
    }

    @logger
    public processContent() {
        return true;
    }


    @logger
    public attached() {
         setTimeout(() => {

            this.special = null;

            setTimeout(() => {

                this.special = {
                    name: 'me',
                    cool: ['Im crazy']
                };

                // set value to mnake sure they work
                setTimeout(() => {
                    this.special = {
                        name: 'me',
                        cool: [{
                            name: 'me',
                            cool: ['Im crazy']
                        }]
                    };

                    // clear values so if.bind triggers
                    setTimeout(() => {
                        this.special = {
                            name: 'me',
                            cool: [{
                                name: 'me',
                                cool: [{
                                    name: 'me',
                                    cool: ['Im crazy']
                                }]
                            }]
                        };

                        // put value back again to test if.bind
                        setTimeout(() => {
                            this.special = {
                                name: 'me',
                                cool: [{
                                    name: 'me',
                                    cool: [{
                                        name: 'me',
                                        cool: [{
                                            name: 'me',
                                            cool: ['Im crazy']
                                        }]
                                    }]
                                }]
                            };

                            // put value back again to test if.bind
                            setTimeout(() => {
                                this.special = {
                                    name: 'me',
                                    cool: [{
                                        name: 'me',
                                        cool: [{
                                            name: 'me',
                                            cool: [{
                                                name: 'me',
                                                cool: [{
                                                    name: 'me',
                                                    cool: []
                                                }]
                                            }]
                                        }]
                                    }]
                                };

                                setTimeout(() => {
                                    this.special = {
                                        name: 'me',
                                        cool: [{
                                            name: 'me',
                                            cool: [{
                                                name: 'me',
                                                cool: [{
                                                    name: 'me',
                                                    cool: [{
                                                        name: 'me',
                                                        cool: ['whooho']
                                                    }]
                                                }]
                                            }]
                                        }]
                                    };

                                }, 3000);

                            }, 3000);

                        }, 3000);

                    }, 3000);

                }, 2000);

            }, 2000);

        }, 2000);
    }

    @logger
    public contentProcessed(...params) {
        // todo
    }
}