template - 模版控件

NEJ模板系统功能强大,提供了7大模板,包含基本模板(Text模板、Node、Item模板、JST模板)和扩展模板(CSS模板、JS模板、HTML模板)。基本模板提供了通用的结构模板功能,扩展模板提供了延迟加载各种客户端资源(CSS、JS、HTML)的功能。Text、Node模板只提供了基本的缓存功能,开发人员一般也不会直接使用。在使用结构模板的时候一般会选用JST模板或者Item模板。

如:

模版控件

Allocate

模版控件所在脚本

{lib}ui/template/tpl.js

{lib}ui/template/jst.js

页面结构如下:

添加template控件依赖文件如下:

var f=function(){
    var _ = NEJ.P,
        _e = _('nej.e'),
        _v = _('nej.v'),
        _ui= _('nej.ui');

    //==================  使用Text模版  ==================
    //解析模版
    _e._$parseTemplate("textTemplate");
    //获取Text模版中缓存的Text
    var _text=_e._$getTextTemplate("textTemplate");

    //==================  使用Node模版  ==================
    //解析模版
    _e._$parseTemplate("nodeTemplate");
    //获取Node模版中缓存的Node
    var _node=_e._$getNodeTemplate("nodeTemplate");

    //==================  使用Item模版  ==================
    //Item模版提供了(节点+逻辑)缓存功能,非常适合带有逻辑的列表项的开发。Item模版一般使用Node模版来获取节点
    //解析模版
    _e._$parseTemplate("itemTemplate");
    //获取列表项列表,并进行数据和逻辑合并, _data {Array} 数据列表;_objectItem {Function} 列表项类;_setting {Object} 可选配置参数
    var _dataItems=_e._$getItemTemplate(_data,_objectItem,_setting);
    //具体数据 Array类型
    _data=[{name:x;},{name:y;}];
    //定义列表项类 继承自nej.u._$$Item
    var _nns=_('newNameSpace'),_pro,_supro; //新名字空间,原型,父类原型
    _nns._$$ObjectItem=NEJ.C();
    _pro=_nns._$$ObjectItem._$extend(_ui._$$Item,!0);
    _supro=_ui._$$Item.prototype;
    //初始化节点,子类重写具体逻辑,例如添加事件等等
    _pro.__initNode=function(){
        //执行父类的初始化函数
        _supro.__initNode.apply(this,arguments);
        //获取节点
        this.__node=this.__body.getElementsByTagName('div')[0];
        //添加事件
        _v._$addEvent(this.__node,'click',this.__onclickNode._$bind(this));
    };
    //初始化外观信息
    _pro.__initXGui=function(){
        //设置节点模版的id,将结构和逻辑关联起来
        this.__seed_html="itemTemplate";
    };
    //刷新类,子类实现具体逻辑,将数据填充到节点上去
    _pro.__doRefresh=function(_itemData){
        //doing 譬如赋值
        this.__node.innerText=this.__index+":"+_itemData.name;
    };
    //node点击响应函数
    _pro.__onClickNode=function(_event){
        //doing
    };
    //控件销毁
    _pro.__destroy=function(){
        _supro.__destroy.apply(this,arguments);
        //doing
    }
    //可选配置参数
    _setting={parent:'parentNode'};     //parent {String|Node} 父节点

    //==================  使用JST模版  ==================
    //JST模板是基于模板生成文本输出的通用工具,模板标示符为jst。JST的语法类似于freemaker。开发人员一般使用JST来合并数据与html结构。
    //解析模版
    _e._$parseTemplate("jstTemplate");
    //工人信息数据
    var _workersData={workers:[{name:"worker_00",gender:1},
                        {name:"worker_01",gender:0},
                        {name:"worker_02",gender:0}]};
    //数据与模版合并,并显示到页面上
    _e._$renderHtmlTemplate("parentNodeId","jstTemplate",_workersData);

    //==================  使用CSS模版  ==================
    //解析模版,代码执行后,../css/example.css加载并生效,cssTemplate里的代码段也会生效
    _e._$parseTemplate('cssTemplate');

    //==================  使用JS模版  ==================
    //解析模版,代码执行后,../js/example_1.js、../js/example_2.js加载并生效,textarea里的代码段也会生效
    _e._$parseTemplate('jsTemplate');

    //==================  使用HTML模版  ==================
    //解析模版,代码执行后,加载template.html
    _e._$parseTemplate("htmlTemplate");
};
define(['{lib}ui/template/tpl.js','{lib}ui/template/jst.js'],f);

Explain

参数

更多的参数信息请参照template.js api说明

Recycle

template external interface

tpl控件外部接口

_$parseTemplate(_element) 解析模版集合

_$addTextTemplate(_key,_value) 添加文本模板

_$getTextTemplate(_key) 取文本模板

_$addNodeTemplate(_element,_key) 添加节点模板

_$getNodeTemplate(_key) 取节点模版

_$getItemTemplate(_list,_item,_options) 取ITEM模板列表

_$getItemById(_id) 根据ID取列表项对象

jst控件外部接口

_$getHtmlTemplateSeed() 取模板随机数种子

_$getHtmlTemplate(_sn,_data,_extend) 根据模板的序列号合并模板数据

_$addHtmlTemplate(_content,_keep) 添加JST模板,JST模板可以是节点的值

_$renderHtmlTemplate(_parent,_sn,_data,_extend) 整合模板后输出至指定容器节点

Known Issues

Demo

template控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus