模板语法介绍 $.tpl()

写在前面

凯撒模板语法拥有自己的特色,在模板解析原理上借鉴了VUE,所以它可以在自由的语法上实现动态数据监听,数据的双向绑定

支持在模板中使用全局变量、全局函数,数据监听只能在一个对象上才能发挥作用,所以当变量是一个全局string时,并不会被监听

如需绑定事件,请使用.on()、.click()...手动绑定

如何使用
<script>
var obj = $.tpl({
    el : '#xxx', //需要渲染哪个DOM
    tpl : '', //渲染使用的模板代码 如果未指定 则自动渲染el参数的DOM
    data : { //参与渲染的数据 必须是一个对象
        field1 : '',
        field2 : '',
    }
})
</script>
传入参数介绍
data模板渲染所使用的数据
el需要渲染的元素(通过选择器筛选或KSA对象)
tpl需要渲染的HTML源代码
isMonitor是否需要监听数据变化与双向绑定
默认true
如果只需一次性渲染(后期不再追踪变量变化时可以设置为false
返回值介绍
data传入的data
tpl传入的tpl
dom渲染成功的元素节点列表(Array)
可根据场景直接插入到document中
html渲染成功的HTML

el与tpl必须任意指定一个

当只有tpl参数时,可通过返回对象中的html参数得到最终渲染出来的html代码

综合Demo

data必须是一个object对象!

整个渲染过程是同步的,所以你可以在渲染语句后面继续写其他js代码

修改 list[1].name 修改 修改 list[2].name 修改
变量名 引用方式

用法:{{value}}

支持三元运算:{{value ? value : 'test'}}

支持函数:{{function()}}

末尾不能加;

模板语法中,任何时候都必须使用花括号,因为它是动态语句的象征

遍历数据 方式

用法1:{{loop list value}} ... {{/loop}}
用法2:{{loop list key value}} ... {{/loop}}

loop不能用在标签属性中
if 判断类用法

用法:{{if value}} ... {{/if}}

if不能用在标签属性中
事件的绑定
<ks-btn @click="$.Dialog('success','操作成功')">点击试试</ks-btn>

在事件属性名前面加@事件名称无需on

数据双向绑定
<input type="text" v-model="{{变量名}}" value="">

v-model="{{变量名}}"

动态绑定HTML属性
<input type="ks-text" :disabled="{{disabled ? 'true' : false}}" value="这是一个输入框">

只需要在需要绑定的属性前面加冒号:

属性值内必须使用双花括号,花括号中支持javascript表达式

全局变量监听踩坑注意
<script>
    a = 'A的值';
    var b = 'B的值';
    $(document).ready(function(){
        $.tpl({
            el : $('#tpldemo-3')
        });
    });
</script>
在上面的例子中,变量a可以正常监听,但变量b是无法监听的(因为它不是全局变量)

数据监听原理

核心肯定是通过Object.defineProperty进行监听,这个谁也跑不掉

为什么凯撒能在模板中混用全局变量?

模板语法只是一种书写方式,最终还是要将语法转换为JS原生语句进行执行,而转换为原生语句后是可以访问到全局变量的

为什么全局变量能被监听?

凯撒在解析模板语法的过程中,会通过正则表达式提取语法内所有可能的变量名(正则表达式不尽完善可能有bug),在最终执行原生语句同时对可能的每个变量进行拦截