首页 教程 API文档

模板模块

2015-09-11 10:27:40

属性

依赖模型 events
复杂程度 高
使用频率 中
成员类型 静态模块

描述

Std.template是一个模板模块,可以根据模板语法写一个模板区块,每次根据传入的数据而生成出对应HTML代码.

Std.template模板包含两种语法,一种是简写法,另一种是js本身的语法,当然,两者也可以混合使用.

简写语法可以满足大多操作,通常情况下都是使用这种写法,而JS语法则就和执行JS完全一样,可以进行任何操作,例如执行函数,定义变量等.

模板的标签以<? 作为开头,以?>作为结束,模板标签的首个字符代表了这个标签的作用,模板标签有以下这些类型:

字符 描述
= = 符号表示直接输出传递数据中的某个变量,例如 <?=name?> 表示直接输出数据中的name变量
$ $ 符号表示读取一个变量,例如 <?$abc?> 表示直接输出已经定义的变量 abc,如果这个变量没有定义,那么什么结果也不会获取到
# # 符号表示这是一个简写语法的开头
/ / 符号表示这是一个简写语法的结束

如果模板标签没有以上字符,那么表示这是一个原始JS语法.

模板中包含2个全局变量:

名称 描述
_print 这个变量作用为保存要输出的字符串,当执行渲染模板的时候,_print 这个变量就决定了要输出的内容.
_data 这个变量为渲染模板时候的json数据.
提示: debug版本的StdJS在模板执行时候发生了错误时候会在控制台输出相关的错误信息,而release版本则什么也不会输出.

语法

直接使用


Object Std.template(String name);
Object Std.template(String name,String templateString);

创建模块实例


new Std.template(Object option);
new Std.template(String templateString);
new Std.template(String name,String templateString);

参数

名称 类型 描述
name String 模板的静态名称
templateString String 模板字符串内容
option Object 创建模板时候的参数选项

参数选项

名称 类型 默认值 描述
text String null 模板字符串
element Object null 指定要从哪个DOM元素中读取内容作为模板字符串
url String null 指定需要读取模板内容字符串的url地址
on Object null 默认需要绑定的事件

事件

名称 回调参数 描述
load 无 当模板被载入的时候,load事件将会被触发.
loadError 无 当模板载入发生错误时候,loadError事件将会被触发.
error 错误文本 当模板进行分析或者编译时候,如果出现了错误,error事件将会被触发.

返回值

1. 当直接使用静态方法Std.template的时候,如果传递的只有一个字符串参数, 那么就会返回之前保存的模板实例对象.

2. 如果直接使用静态方法Std.template的时候,如果传递的是2个参数, 并且两个都是字符串的时候,那么第二个字符串将会被当成模板字符串解析, 并且以第一个参数作为名称保存为静态模板,并且将其作为返回值返回.

模板写法

简写语法例子:

获取变量:


<?=name?>
<?=value.data?>
<?$_data.name?>

if语句


<?#if name == "top"?>
    <?=pageX?>
<?#elseif name == "left"?>
    <?=pageY?>
<?#else?>
    <?=pageN?>
<?/if?>

for语句


<?#for var i=0;i<10;i++?>
    <?$i?>
<?/for?>

<?#for i=0;i<10;i++?>
    <?#if i==5?>
        <?#continue?>
    <?#else?>
        <?=i?>
    <?/if?>
<?/for?>

while语句


<?#while size != 0?>
    <?_data.size-=1?>
    <?=size?>
<?/while?>

each语句


<?#each list?>
    <?$index?>:<?$value?>
<?/each?>

<?#each list as index,value?>
    <?$index?>:<?$value?>
<?/each?>

<?#each members as name,value?>
    <?$name?>:<?$value?>
<?/each?>

JS语法例子:

获取变量


<?_print+=_data.name?>
<?_print+=_data.value.data?>
<?$_data.name?>

if语句


<?if(name == "top"){?>
    <?_print += _data.pageX;?>
<?}else if(name == "left"){?>
    <?_print += _data.pageY;?>
<?}else{?>
    <?_print += _data.pageN;?>
<?}?>

for语句


<?for(var i=0;i<10;i++){?>
    <?$i?>
<?}?>

<?for(var i=0;i<10;i++){?>
    <?if(i==5){?>
        <?continue;?>
    <?}else{?>
        <?$i?>
    <?}?>
<?}?>

while语句


<?while(_data.size != 0){?>
    <?_data.size-=1?>
    <?=size?>
<?}?>

其他


<?
    function abc(){
        alert(123)
    }
    abc();
?>