zoukankan      html  css  js  c++  java
  • templating(模板)

    templating特点:

    Dynamic Loading动态加载

    Directives指令

    Component Directive组件指令示例:

    @ComponentDirective({
        selector:'tab-container',
        directives:[NgRepeat]
    })
    export class TabContainer {
        constructor(panes:Query<pane>) {
            this.panes = panes;
        }
    
        select(selectedpane:pane) { ... }
    }

    Decorator Directive装饰器指令示例:

    @DecoratorDirective({
        selector: '[ng-show]',
        bind:{'ngShow:': 'ngShow'},
        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模板指令示例:

    @TemplateDirective({
        selector: 'nf-if',
        bind: {'ngIf': 'nfIfChanged'}
    })
    export class NgIf {
        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) {
                this.view = this.viewFactory.createView();
                this.view.appendto(this.viewPort);
            }
        }
    }
  • 相关阅读:
    29.内置方法中之描述符
    28. 面向对象进阶之内置方法上
    Sort Colors*
    Implement Trie (Prefix Tree)
    Course Schedule
    Permutations
    Reverse Linked List
    Decode Ways
    Subsets *
    Longest Consecutive Sequence *
  • 原文地址:https://www.cnblogs.com/cjxhd/p/5152716.html
Copyright © 2011-2022 走看看