grootJsAPI文档
标签：
groot.view(name,factory) 用于创建一个modelView对象与指令gt-view对应 参数用途name 创建的modelView的名称,用groot.vms[name]可以访问到创建的对象
factory 函数：有两个参数:vm,ve,分别放属性和事件
返回 一个modelView对象
xxxRender() 更新视图，参数可有可无 场景用法
属性 xxxRender()调用。没有参数；xxx为属性名
对象 xxxRender()调用。没有参数；xxx为对象名
数组 xxxRender(index)调用。xxx为数组名，当无参数时，，更新整个数组；有参数时，更新数组对应的项
对象绑定 用于绑定vm对象 参数用途
无 用于绑定vm对象
代码示例 <html>
<head>
<title>绑定对象</title>
<script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script>
<script src="http://www.mamicode.com/groot.js"></script>
</head>
<body>
<div gt-view="myview">
<div gt-object="data">
姓名:<span gt-text="{name}"></span>--性别:<span gt-text="{sex}"></span><input gt-click="hello" type="button"
value="变名称">
</div>
</div>
</body>
</html>
<script>
groot.view("myview", function (vm, ve) {
vm.data = {
"name": "张三", "sex": "男"
}
ve.hello = function () {
if (vm.data.name == "张三") {
vm.data.name = "李四"
} else {
vm.data.name = "张三"
}
vm.data.nameRender();
}
})
</script> 数组操作方法 此类方法由于操作vm中的数组，用这些方法操作数组不用调用xxxRender()刷新视图,xxx为数组名称 方法名用法
xxxpush() 同数组push()方法
xxxpop() 同数组pop()
xxxshift() 同数组shift()
xxxunshift() 同数组unshift()方法
xxxsplice() 同数组splice()方法
xxxconcat() 同数组concat()方法
属性绑定 用于绑定vm的属性，以便和vm对应起来 指令用法
gt-text 格式{属性名};也可以是表达式如：{属性名1}+{属性名2}
gt-attr gt-attr="属性名称(标签属性,value表达式)" 如 gt-attr="uid(id,‘view‘+value)"对应+uid
gt-css gt-css="属性名称(标签属性,value表达式)" ;同上
gt-class 1.gt-class="属性名称(class名称:value表达式,class名称:value表达式,class名称:value表达式...)"
value表达式为true 就绑定对应的属性 为fale 就不绑定对应的属性
2.gt-class-属性名="class名称:value表达式,class名称:value表达式,class名称:value表达式..."(可绑定多个)
gt-valule gt-value="属性名称" 用于input textarea绑定
gt-valule-change gt-value="属性名称" 用于input textarea绑定;当输入框的值变化时 输入框的值同步到viewModel
gt-valule-blur gt-value="属性名称" 用于input textarea绑定;当输入框失去焦点时 输入框的值同步到viewModel<
gt-radio gt-radio="属性名称" 用于radio的绑定，选中后，属性名更新为选中radio的value值
gt-select gt-select="属性名称" 用于select的绑定，选中后，属性名更新为选中option的value值
gt-check gt-check="属性名称" 用于checkbox的绑定,属性为true时选中，为false是不选中
gt-ui gt-ui="属性名称(控件名称)" 用于绑定控件;控件名称在控件文件里定义groot.ui[控件名称]
控件需要用require("./路径");引用进来
事件绑定 用于绑定vm的事件，以便操作vm 格式指令
gt-xxx(事件名) click, abort, blur, change, dblclick, error, focus, keydown, keypress, keyup, unload, load, mousedown, mousemove, mouseout, mouseover, mouseup, reset, resize, submit
gt-watch(变量监控指令) 用于监控属性变化 格式用法
gt-watch(函数) gt-watch放在要监控的变量所在的标签里，函数定义在ve上面;
函数($self, value) $self:发生变化的属性所在的vm;value:变化后新的值
事件参数$self 用于监控属性变化 格式用法
ve.函数($self) 发生事件所在的vm
$self.$index 为对象在数组中的索引
$self.$first 该对象是否为数组中的第一个对象 是 true 否 false
$self.$last 该对象是否为数组中的最后一个对象 是 true 否 false
$self.parent() 返回整个数组 当时对象时 返回此对象所在的对象
$self.outerParent() 返回数组所在vm
时间属性过滤器 _.d({属性},格式)) 用于格式化输出时间 格式用法
_.d({属性},格式)) 用于格式化输出时间;
备注:只对gt-text有效
require() CommonJs规范的实现，默认加载符合CommonJs的js模块 格式用法
require(路径) CommonJs规范
require(路径!text) 引用 文本如var txt = require(路径!text) txt变量就获得文件的内容
require(路径!css) 加载css,把加载的样式放入页面head的<style>--</style>中
gt-include 引入外部模版 场景用法
常规 gt-include="./templ.html"
递归 用于绑定树
groot.filter({过滤器名称:function(属性,格式)},...) 属性过滤器扩展函数 项目说明
过滤器名称 _.d({time},‘yyyy-MM-dd‘)中的d
过滤器名称 _.d({time},‘yyyy-MM-dd‘)中的time
格式 _.d({time},‘yyyy-MM-dd‘)中的‘yyyy-MM-dd‘
代码示例 (GrootJs865行) groot.filter( { "过滤器名称": ,function (value, format) { code ... code return 返回值 } } ) groot.bindExtend({name:属性名,Handler(elment, value))},...) 自定义展函数 参数说明
name 自定义属性名称
Handler 自定义属性处理函数:elment-docment对象,value-属性值
代码示例 (GrootJs840行) groot.bindExtend( { "Name": "show", "Handler": function (elment, value) { if (value == true) { elment.show(); } else { elment.hide(); } } } ) 系统扩展属性 系统内置的用groot.bindExtend扩展的属性 属性名用法
show docment对象是否显示 true显示,false隐藏
width docment对象宽
height docment对象高
disabled input textArea 属性 false 为 disabled true 可编辑
readonly input textArea 属性 false 为 readonly true 可编辑
UI控件定义 函数groot.ui[控件名] = function (element, id, data, value, upParent) 参数用法
element 控件所在的html容器 即<span gt-ui="name(myui)"></span>
id 系统为控件生成的唯一id
upParent 同步父vm得值函数
data 初始化控件所用值;如果需要初始化数据
<span gt-ui="name(myui)" gt-ui-data="{key:‘张三‘}"> data就会接受到，并自动转为json对象
也可以这样初始化
groot.uiInit["test"]={"key":"GUJ778-090909"}
<span gt-ui="name(myui)" gt-ui-data="uiInit[test]">
UI控件定义相关 名称用法
uivalue 当改变父vm的属性值的时候的值的时候，程序是通过 控件的uivalue 来更新控件的值的，所有每个控件必须有uivalue属性
gt-ui-data 初始化控件所用值
groot.createElement(html片段,id,element) 把html加入element; 只有用groot.creatElement函数 控件才会被系统的垃圾回收机制回收
代码示例 (示例ui.js) groot.ui["myui"] = function (element, id, data, value, upParent) { groot.createElement("<span gt-text=\"{uivalue}\" style=‘color: red‘></span><input gt-click=\"change\" type=‘button‘ value=‘控件‘>", id,element); var moudle = groot.view(id, function (vm, ve) { vm.uivalue = value; ve.change = function () { vm.uivalue = "李四"; vm.uivalueRender(); upParent(); } }); } 系统API GrootJs 系统常用API 名称用途
groot.absUrl(url) 把相对路径转换为绝对路径
groot.model 把vm对象转换为json 去掉系统生成的的属性groot.model
grootJsAPI文档
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/69840.html
- 上一篇：IntelliJ IDEA 开发swing（一）
- 下一篇：栈的链式存储
