groot.view(name,factory)
用于创建一个modelView对象与指令gt-view对应
| 参数 | 用途 |
---|
name | 创建的modelView的名称,用groot.vms[name]可以访问到创建的对象 |
factory | 函数:有两个参数:vm,ve,分别放属性和事件 |
返回 | 一个modelView对象 |
xxxRender()
更新视图,参数可有可无
| 场景 | 用法 |
---|
属性 | xxxRender()调用。没有参数;xxx为属性名 |
对象 | xxxRender()调用。没有参数;xxx为对象名 |
数组 | xxxRender(index)调用。xxx为数组名,当无参数时,更新整个数组;有参数时,更新数组对应的项 |
对象绑定
代码示例
<html>
<head>
<title>绑定对象</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="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)"对应 id="view"+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 |