PithyJt
Razor语法的Javascript模板引擎。
支持一些简单的语法检查,可定位到语法错误行号。
支持缓存,采用Crc32作缓存唯一性校验。
通过扩展,支持Html元素快捷生成,模板无限级继承。
不习惯Razor语法,可以通过扩展,使用hmtltag来定义模板。
用法
引用Pjt:
编译模板:
var codes = Pjt.compile('
@description
');渲染数据:
var text = Pjt.render(codes, {
title : '标题Pjt',
description : '描述:一个Razor语法的Javscript模板引擎'
});
输出结果:
描述:一个Razor语法的Javscript模板引擎
文件结构
resources几个演示代码常用的方法
srcPjt源码
pithy.ajax.js非Pjt必须,一个好用的ajax请求插件
pithy.teemplate.jsPjt核心,必须
pithy.teemplate.helper.js非Pjt必须,一些方便的快速操作封装
pithy.teemplate.htmlhelper.js非Pjt必须,快捷的Html表单元素生成,无需调用任何方法,引用后自动实现
pithy.teemplate.extends.js非Pjt必须,实现Pjt继承功能的扩展
pithy.teemplate.htmltag.js非Pjt必须,自动实现html标签模板功能的扩展,引用后自动实现,无需调用任何方法
demo简单示例
extends.htmlPjt继承功能的扩展示例
htmlhelper.htmlhtmlHtml表单元素生成示例
index.htmlhtml基本示例
layouts.htmlhtml用于extends示例的布局内容
index.html在线编译渲染
src目录中的pithy.teemplate.js为核心文件,Pjt必须。
目录中的其他文件均为扩展。
其中pithy.ajax.js是一个简单的ajax请求库,内置了require,可以用来引用AMD规范的模块。
pithy.teemplate.*.js 四个扩展库,可扩展Pjt的功能。可以通过script标签直接引用,也可以用AJAX.require引用。
示例数据
{
name : 'anlige',
age : 23,
list : [
{date : '1986-9-1', text : 'birthday'},
{date : '1998-9-1', text : 'schrool'},
{date : '2009-6-21', text : 'work'}
],
basic : {
sex : 'boy',
works : 9
}
}
JavaScript调用方法
不借助helper
///初始化实例
///模板编译
var code = Pjt.compile('
@name
');///渲染数据
id('result2').innerHTML = Pjt.render(code, {name : 'Jazor'});
借助helper(链式写法)
PjtHelper
.compile('
@name
').render({name : 'Jazor'})
.appendTo('result');
appendTo方法把渲染后的数据赋值给result标签。
借助helper(非链式写法)
///编译
var render = PjtHelper.compile('
@name
');///渲染
var appender = render.render({name : 'Jazor'});
///赋值
id('result3').innerHTML = appender;
直接把appender赋值给result3标签。
bind方法
/*
PjtHelper.bind(data, src, dest);
data : 待渲染的数据
src : html元素,包含待编译的模板文本
dest : 1、html元素, 用来显示渲染结果
2、回调函数, 第一个参数为渲染结果
*/
PjtHelper.bind({name : 'Jazor'}, '_template', 'result3');
///等效于
PjtHelper.bind({name : 'Jazor'}, '_template', function(res){
document.getElementById('result3').innerHTML = res;
});
模板语法类似Razor语法,不过比较宽松
赋值
支持基本的表达式,必要情况下可以使用“()”来作为表达式界定符。
模板中输出@符号,请使用@@。
代码块
@{
var r = 255, g = 0, b = 0;
}
使用@紧跟{作为一个代码块,代码块需要}结束。
HTML块
@region
var name = 'anlige';
@endregion
使用@region标识一个HTML代码块的开始,@endregion之前的所有代码仅仅被当做普通文本行,但参与变量渲染。
主要用来在模板中引用style或script标签,当然,不建议在模板中引用,模板中尽量只有html标签。
if语句
@if( age > 23){
大于23岁
}else{
不大于23岁
}
for语句(原生js)
@for(var i = 0; i < list.length; i++){
@list[i].date}
each语句(用于数组)
@each list as value{
date = @value.date}
@each list as key, value{
key = @key, date = @value.date}
foreach语句(用于普通js对象,这里就叫键值对对象吧)
@foreach basic as key, value{
@key = @value}
each和foreach是语法糖,最后是编译成原生js。