WEB 视图页面的自动渲染需要客户端脚本的支持,所以需要在页面模板中引用引导脚本。
. 页面模板就是 WEB 视图页面的 body,对应的脚本对象为 AutoCSer.Skin 类型的 AutoCSer.Skin.Body,是页面的主模板,这个模板会在页面初始化的时候自动匹配服务端数据 API 并渲染页面。
. 命名模板用于临时性脚本交互产生的 HTML 渲染需求(比如弹出层),需要开发者在需求逻辑中构造数据对象与初始化操作。
一般情况下,必须使用 skin="" 申明为命名模板,必须指定 id 用于标识模板名称,对应的脚本对象为 AutoCSer.Skin 类型的 AutoCSer.Skin.Skins["模板名称"]。
示例中的 body="" 用于在页面模板初始化之前临时性的删除 DOM 节点避免被页面模板渲染,在页面模板初始化之后会将这些 DOM 节点追加到 body 节点的最后。
. 模板数据节点是由原始视图数据绑定到页面模板或者命名模板以后在渲染过程中产生的与原始视图数据定义组织结构匹配的 AutoCSer.SkinData 类型的数据节点,该节点用于修改原始视图数据并控制 UI 渲染。
页面模板与命名模板都可以通过 AutoCSer.Skin 的实例函数 SkinData() 获取模板数据节点的根节点,页面模板也可以直接通过 AutoCSer.Skin.BodyData() 这个封装获取根节点。
SkinData()有一个 string 类型的可选参数,用于指定数据属性名称直接获取根节点的下级节点。
下面主要介绍 AutoCSer.SkinData 类型在开发中需要用到的几个实例方法:
$(Name: string) : AutoCSer.SkinData 用于指定数据属性名称获取子节点。
$Set(Data: Object, IsReShow = true) 用于修改原始视图数据。
IsReShow 默认为 true 表示修改数据以后触发 UI 渲染事件,否则修改不会马上反应到 UI 上。
$Copy(Data: Object, IsReShow = true) 用于将参数 Data 的属性复制到原始视图数据中。
$Add(Data: number, IsReShow = true) 用于原始视图数据类型为 number 的情况下,使用加法修改原始视图数据。
$Not(IsReShow = true): boolean 用于对原始视图数据进行逻辑取反操作。
在原始视图数据为数组的情况下,可以使用以下 API 操作:
$Push(Value: Object, IsReShow = true) 用于在数组的最后添加一个新的子节点。
$Pushs(Datas: Object[], IsReShow = true) 用于在数组的最后添加若干子节点。
$PushExpand(Value: Object, IsReShow = true) 用于在数组的前面添加一个新的子节点。
$PushExpands(Datas: Object[], IsReShow = true) 用于在数组的前面添加若干子节点。
$Remove(IsValue: (Data: any) => boolean, IsReShow = true) 用于删除符合指定条件的所有子节点。
$RemoveAt(Index: number, Count: number = 1, IsReShow = true) 用于删除指定位置开始的子节点。
$Sort(Function: (Left: any, Right: any) => number) 用于子节点排序操作。
$Replace(Value: Object, IsValue: (Data: any) => boolean, IsReShow = true) 用于替换符合指定条件的子节点。
$For(Function: (Data: SkinData) => void) 用于遍历子节点并对子节点做指定操作。
$Array(): AutoCSer.SkinData[] 用于以数组的形式获取子节点集合。
$Find(IsValue: (Data: any) => boolean): AutoCSer.SkinData[] 用于查找所有符合指定条件的子节点集合。