vm模板

设计原则

让前端来写后端的vm模板，并且前端不需要搭建各种繁杂的后端环境，前后端以 .vm 为沟通桥梁，另外模板的数据源可以在项目开始前前后端约定之后生成JSON文件，从而使两个角色并行开发。

velocity模板引挚

velocity模板语法的javascript实现，Velocity是基于Java的模板引擎，应用广泛。Velocity模板适用于大量模板使用的场景，支持模板嵌套，复杂的逻辑运算，包含基本数据类型、变量赋值和函数等功能。

目录结构

• html/vm.html
• widget/vm/vm.json
• widget/vm/vm.vm

引用方法

{%widget name="vm" data='{"name":"myname"}'%}

注意data之间的单双引号，data内容必须为json类型

数据源分类

• data传参数据源，如 {%widget name="vm" data='{"name":"myname"}' %} 中的{"name":"myname"}
• 数据源文件，如widget/vm/vm.json的内容
• 两者优先级 "data传参数据源" > "数据源文件"，即data传参数据源和数据源文件，数据名称相同时，以"data传参数据源"为准

velocity基本语法

• 1."#"用来标识Velocity的脚本语句，包括#set、#if 、#else、#end、#foreach、#end、#iinclude、#parse、#macro等，如:

  #if($info.images)<img src="$info.images">#else<img src="noPhoto.jpg">#end

• 2."$"用来标识一个变量，如

  $i、$msg.errorNum

• 3."!"用来强制把不存在的变量显示为空白

  $!msg

• 4.注释，如：

  ## 这是一行注释，不会输出

velocity语法详解

具体更详细的语法可参考官网 如vm.vm

• 1.变量赋值输出

  Welcome $name to Javayou.com!today is $date.tdday is $mydae.//未被定义的变量将当成字符串

• 2.设置变量值,所有变量都以$开头

  #set( $iAmVariable = "good!" )Welcome $name to Javayou.com!today is $date.$iAmVariable

• 3.if,else判断

  #set ($admin = "admin")#set ($user = "user")#if ($admin == $user)Welcome admin!#elseWelcome user!#end

• 4.迭代数据List ($velocityCount为列举序号，默认从1开始)

  #foreach( $product in $allProducts )    <li>$velocityCount $product.title</li>#end

• 5.迭代数据get key

  #foreach($key in $myProducts.keySet() )      $key `s value: $myProducts.get($key)#end

• 6.导入其它文件,可输入多个

  #parse("vm_a.vm")#parse("vm_b.vm")

• 7.[todo多个文件用逗号隔开]

• 8.简单遍历多个div #foreach( $i in [1,2,3,4] )

  $i
  #end

数据源举例

如vm.json

{    "name":"vm name",    "allProducts":[        {            "title": "风",             "from": "中国"         },         {            "title": "应用",             "from": "河北"        }    ],    "myProducts":{        "age":9,        "from":"cn"    }}

from: https://github.com/putaoshu/jdf/blob/master/doc/core_vm.md