Templating and Data Binding

gistfile1.js

// your mileage may vary!!!!



// Component Directive

    @ComponentDirective({
        // CSS selector which is used to match this directive to
        selector:'tab-container',
        // template dependencies
        directives:[NgRepeat]
    })
    export class TabContainer {  
        // DI list in constructor params
        constructor(panes:Query<Pane>) {
            // no $scope
            // template binds directly to class instance
            this.panes = panes;
        }
    
        select(selectedPane:Pane) { ... }
    }
    
    
// Decorator Directive    
    
    // naive ng-show
    @DecoratorDirective({
        selector:'[ng-show]',
        // maps class attribute ng-show to directive class property ngShow
        bind: { 'ngShow': 'ngShow' },
        // similar to $watch, observes the ngShow element property and declares the ngShowChanged callback
        observe: {'ngShow': 'ngShowChanged'}
    })
    export class NgShow {  
        constructor(element:Element) {
            this.element = element;
        }
    
        ngShowChanged(newValue){
            if(newValue){
                this.element.style.display = 'block';
            }else{
                this.element.style.display = 'none';
            }
        }
    }
    
    
    
    
// Template Directive    
    
    // naive ng-if
    @TemplateDirective({
        selector: '[ng-if]',
        bind: {'ngIf': 'ngIf'},
        observe: {'ngIf': 'ngIfChanged'}
    })
    export class NgIf {  
        // automatically compiled template is injected as a viewfactory
        // 
        constructor(viewFactory:BoundViewFactory, viewPort:ViewPort) {
            this.viewFactory = viewFactory;
            this.viewPort = viewPort;
            this.view = null;
        }
    
        ngIfChanged(value) {
            if (!value && this.view) {
                this.view.remove();
                this.view = null;
            }
    
            if (value) {
                // createView is exposed on the viewfactory to instantiate the template
                this.view = this.viewFactory.createView();
                // viewport represents the place in the DOM where the template was extracted
                // similar to the 1.x element parameter in a directive link function
                this.view.appendTo(this.viewPort);
            }
        }
    }





// Routing Controller via directive
    
    // no directive annotator object needed since not bound to DOM
    @ComponentDirective
    export class CustomerEditController {  
        constructor(server:Server) {
            this.server = server;
            this.customer = null;
        }
    
        activate(customerId) {
            return this.server.loadCustomer(customerId)
                .then(response => this.customer = response.customer);
        }
    }
    
    

gistfile2.html

<template>  
    <div class="border">
        <div class="tabs">
            <!-- 
            square brackets denotes dereference an attribute to its property 
            unidirectional data binding from model/ctrl -> view
            
            parenthesis denotes expression binding to element event
            ^ indicates event will be handled at document level instead of element level
            -->
            <div [ng-repeat|pane]="panes" 
                 class="tab" 
                 (^click)="select(pane)">
                <img [src]="pane.icon">
                <span>
                    <!-- 
                    string interpolation
                    unidirectional data binding from model/ctrl -> view
                    -->
                    ${pane.name}
                </span>
            </div>
        </div>
        <content></content>
    </div>
</template>