UNPKG

2.83 kBMarkdownView Raw
1# vm模版
2
3## 设计原则
4让前端来写后端的vm模板，并且前端不需要搭建各种繁杂的后端环境，前后端以 .vm 为沟通桥梁，另外模板的数据源可以在项目开始前前后端约定之后生成JSON文件，从而使两个角色并行开发。
5
6## velocity模板引擎
7velocity模板语法的javascript实现，Velocity是基于Java的模板引擎，应用广泛。Velocity模板适用于大量模板使用的场景，支持模板嵌套，复杂的逻辑运算，包含基本数据类型、变量赋值和函数等功能。
8
9## 目录结构
10* html/vm.html
11* widget/vm/vm.json
12* widget/vm/vm.vm
13
14## 引用方法
15
16 {%widget name="vm" data='{"name":"myname"}'%}
17
18注意data之间的单双引号，data内容必须为json类型
19
20## 数据源分类
21* data传参数据源，如 {%widget name="vm" data='{"name":"myname"}' %} 中的{"name":"myname"}
22* 数据源文件，如widget/vm/vm.json的内容
23* 两者优先级 "data传参数据源" > "数据源文件"，即data传参数据源和数据源文件，数据名称相同时，以"data传参数据源"为准
24
25## velocity基本语法
26
27* 1."#"用来标识Velocity的脚本语句，包括#set、#if 、#else、#end、#foreach、#end、#iinclude、#parse、#macro等，如:
28
29 #if($info.images)
30 <img src="$info.images">
31 #else
32 <img src="noPhoto.jpg">
33 #end
34
35* 2."$"用来标识一个变量，如
36
37 $i、$msg.errorNum
38
39* 3."!"用来强制把不存在的变量显示为空白
40
41 $!msg
42
43* 4.注释，如：
44
45 ## 这是一行注释，不会输出
46
47## velocity语法详解
48
49具体更详细的语法可参考[官网] (http://velocity.apache.org/engine/devel/user-guide.html)
50如vm.vm
51
52
53* 1.变量赋值输出
54
55 Welcome $name to Javayou.com!
56 today is $date.
57 tdday is $mydae.//未被定义的变量将当成字符串
58
59* 2.设置变量值,所有变量都以$开头
60
61 #set( $iAmVariable = "good!" )
62 Welcome $name to Javayou.com!
63 today is $date.
64 $iAmVariable
65
66* 3.if,else判断
67
68 #set ($admin = "admin")
69 #set ($user = "user")
70 #if ($admin == $user)
71 Welcome admin!
72 #else
73 Welcome user!
74 #end
75
76* 4.迭代数据List ($velocityCount为列举序号，默认从1开始)
77
78 #foreach( $product in $allProducts )
79 <li>$velocityCount $product.title</li>
80 #end
81
82* 5.迭代数据get key
83
84 #foreach($key in $myProducts.keySet() )
85 $key `s value: $myProducts.get($key)
86 #end
87
88* 6.导入其它文件,可输入多个
89
90 #parse("vm_a.vm")
91 #parse("vm_b.vm")
92
93* 7.[todo多个文件用逗号隔开]
94
95* 8.简单遍历多个div
96 #foreach( $i in [1,2,3,4] )
97 <div>$i</div>
98 #end
99
100
101
102## 数据源举例
103
104如vm.json
105
106 {
107 "name":"vm name",
108 "allProducts":[
109 {
110 "title": "风",
111 "from": "中国"
112 },
113 {
114 "title": "应用",
115 "from": "河北"
116 }
117 ],
118 "myProducts":{
119 "age":9,
120 "from":"cn"
121 }
122 }