jyxtsgx / template

html模板引擎

template 模板引擎文档

参数说明：

在new Template时，需传入一个参数，参数为json对象
如在阅读文档时有任何疑问，可参考demo.html，或直接与我联系：
QQ: 464328895

var newTemplate = new Template({  
    template: '一段模板字符串',  
    data: {  
        '你的命名空间': 'json数据对象',  
        '你还可以有多个命名空间': '另一个json数据对象'  
    },  
    handlers: {  
        '你的方法名': function(value){  
            //value始终都是模板引擎计算出来的原值  
            //你还可以传更多的自定义参数  
        }  
    },
    dataEmptyHandler: false, //如果计算出来的值为undefind/null,是否要转换为空字符串，默认为false，请在项目上线时设置为true，开发过程中默认就好，便于调试
    callback: function(computedText){
        //computedText为计算后的模板字符串
    }
});

方法说明：

静态方法：

Template.addHandlersMethod({
    '你的方法名': function(value){
        //value始终都是模板引擎计算出来的原值  
        //你还可以传更多的自定义参数  
    }
})

用于给Template添加用于处理模板中声明的value处理方法，传入函数第一个参数永远是当前表达式计算出来的值
默认方法有：wrap、dateFormat、getLength

原型方法：

var newTemplate = new Template('这里需要传入参数，demo不在重复写');
newTemplate.addHandlersMethod({
    '你的方法名': function(value){
        //这个和上面的静态方法功能是一样的
        //如果需在要模板中使用你自定义的方法，请在init之前调用
    }
});
var computedText = newTemplte.init(template);
//computedText为模板计算后的字符串，调用init会启动模板引擎开始计算，并返回计算后的值
//如果在实例化时有传入callback，也会调用callback，并把计算后的结果传给callback的第一个参数
//template参数为一个模板字符串，如果不传，则调用Template引擎实例化时传入的template
//也就是说，可以根据同一个json数据对象，传入不同的模板，解析出不同的结果，这在做表格排序等后台管理平台是非常有用的

语法说明：

表达式语法

• {{@data}}
  取当前命名空间为data的值

• {{@data.list.0}}
  取当前命名空间为data的list属性的第0个

• {{@data.timeNumber|dateFormat}}
  取当前命名空间为data的timeNumber属性，并调用dateFormat方法返回处理结果

• {{@data.timeNumber|dateFormat:yyyy-MM-dd}}
  取当前命名空间为data的timeNumber并调用dateFormat方法按yyyy-MM-dd格式返回处理结果，当前传入的参数始终从方法的第二个参数开始，第一个参数永远都为当前表达式的value

• {{@data.timeNumber|你自定义的方法:@data.age}}
  取当前命名空间为data的timeNumber，并调用你自定义的方法，且传入data.age的值

• {{@data.timeNumber|你自定义的方法:@data.age,@data.size}}
  取当前命名空间为data的timeNumber，并调用你自定义的方法，且传入多个值

• {{@data.timeNumber|dateFormat:yyyy-MM-dd|wrap:<div>@content</div>}}
  取当前命名空间的data属性的timeNumber并调用dateFormat方法按yyyy-MM-dd格式返回处理结果，再把处理结果放在一对div标签中

• {{1 + 2}}
  四则运算

• {{@data.number + 3}}
  包含表达式的四则运算

• {{(@data.number + 3) * 5 + @data.size % (2 - 6)}}
  更复杂的四则运算

• {{@data.number && @data.size}}
  逻辑运算，逻辑运算只输出true/false，一般用在if语句中

• {{@true}}
  取真

• {{@false}}
  取假

• {{@undefined}}
  取undefined

• {{!@undefined}}
  取反

• {{(@data.number && @data.list|getLength || 1 > @data.age || @false}}
  更复杂的逻辑运算

• {{(@data.number + 3 >= 5 * (@data.size + 3)}}
  更复杂的逻辑运算

• {{(@data.number + 3 >= 5 * (@data.size + 3)}}
  更复杂的逻辑运算

标签语法：

if

判断语句

<exp if="@true">
    这里是判断为真输出的内容
</exp>

更复杂的判断语句

<exp if="@true && @data.size >= 5">
    这里是判断为真输出的内容
</exp>

更复杂的判断语句

<exp if="@true && @data.size >= 5 || @data.name === 张三 && (1 + 3) % @data.size == 0">
    这里是判断为真输出的内容
</exp>

#####for for循环语句的中文示例

<exp for="每一项的值 当前循环的索引 in @data.list">
    这里是循环输出的内容,序号：{{@当前循环的索引}}，对应的值：{{@每一项的值}}
</exp>

for循环语句

<exp for="valueName valueIndex in @data.list">
    这里是循环输出的内容，序号：{{@valueIndex}}，对应值：{{@valueName}}
</exp>

如果不需要索引还可以这么写

<exp for="variable in @data.list">
    这里是循环输出的内容
</exp>

#####sort sort排序的中文示例

<exp sort="排序后的值 排序方法 是否根据某个值进行排序 @data.list">
    这里不会输出内容，可以在这里嵌套语句或字符串来输出内容，就像我一样
</exp>

根据data.list的size的值从大到小排序，并储存在variable属性中

<exp sort="variable > size @data.list">
    这里不会输出内容，可以在这里嵌套语句或字符串来输出内容，就像我一样
</exp>

直接从小到大排序data.list，并储存在varible属性中

<exp sort="variable < @data.list">
    这里不会输出内容，可以在这里嵌套语句或字符串来输出内容，就像我一样
</exp>

log

把data.list的值打印在控制台中，要注意的是：真正的值是放在打印出来的对象的data属性下面

<exp log="@data.list">这里永远不会输出内容</exp>

总结如下：

1. 运算符用空格隔开，支持四则运算，取模，和逻辑运算
2. 函数参数也可用@取值，但不支持运算，参数之间用逗号隔开
3. for和sort有命名空间语法，需注意书写

demo：

<script type="text/template" id="template">
    <div>
        {{@data.type}}
        <exp for="variable in @data.list">
            这是是循环输出的内容
        </exp>
    </div>
</script>
<script>
    var template = document.getElementById('template').innerHTML;
    var newTemplate = new Template({
        template: template
    });
</script>

• 你也可以在模板中嵌入<exp log="@data.list"></exp>来在控制台打印出当前的数据内容，并查找错误。