• groot.view(name,factory)
• xxxRender()
• 数组操作方法
• 属性绑定
• 事件绑定
• gt-watch(变量监控指令)
• 事件参数$self
• 时间属性过滤器
• require()
• gt-include
• groot.filter
• groot.bindExtend
• 系统扩展属性
• UI控件定义
• UIComponent(2.0新增)
• 系统常用API

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中的数组，用这些方法操作数组不用调用xxxRender()刷新视图,xxx为数组名称

方法名	用法
xxxpush()	同数组push()方法
xxxpop()	同数组pop()
xxxshift()	同数组shift()
xxxunshift()	同数组unshift()方法
xxxsplice()	同数组splice()方法
xxxconcat()	同数组concat()方法

属性绑定

用于绑定vm的属性，以便和vm对应起来

指令	用法
gt-visible	格式{属性名};也可以是表达式如：{属性名1}+{属性名2} 表达式为true 显示，为false 移除
gt-prop(2.0新增)	gt-prop="名称:{属性名1}+{属性名2},名称:{属性名1}+{属性名2},名称:{属性名1}+{属性名2}..." value表达式为true 就绑定对应的属性 为false 就不绑定对应的属性 例如:gt-prop="readonley:{xx}"
$p.属性名	绑定父元素属性，如gt-text={$p.name},同理，绑定父元素的父元素属性gt-text={$p.$p.name}以此类推
gt-text	格式{属性名};也可以是表达式如：{属性名1}+{属性名2},详见简明教程属性绑定
gt-attr	gt-attr="标签属性:属性名1}+{属性名2},标签属性:{属性名1}+{属性名2}..." 如 gt-attr="id:'view'+{uid}"对应 id="view"+uid 详见简明教程属性绑定
gt-css	gt-css="标签属性:{属性名1}+{属性名2},标签属性:{属性名1}+{属性名2}..." ;同上
gt-class	gt-class="class名称:{属性名1}+{属性名2},class名称:{属性名1}+{属性名2},class名称:{属性名1}+{属性名2}..." value表达式为true 就绑定对应的属性 为false 就不绑定对应的属性详见简明教程属性绑定
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值 详见简明教程checkbox radio select
gt-select	gt-select="属性名称" 用于select的绑定，选中后，属性名更新为选中option的value值 详见简明教程checkbox radio select
gt-check	gt-check="属性名称" 用于checkbox的绑定,属性为true时选中，为false是不选中 详见简明教程checkbox radio select
gt-ui	gt-ui="属性名称(控件名称)" 用于绑定控件;控件名称在控件文件里定义groot.ui[控件名称] 控件需要用require("./路径");引用进来 详见示例11
gt-widget(2.0改为)	gt-widget="属性名称:控件名称" 用于绑定控件;控件名称在控件文件里定义groot.widget[控件名称] 控件需要用require("./路径");引用进来 详见示例11
gt-ui	gt-ui="属性名称(控件名称)" 用于绑定控件;控件名称在控件文件里定义groot.ui[控件名称] 控件需要用require("./路径");引用进来 详见示例11

事件绑定

用于绑定vm的事件，以便操作vm

格式	指令
gt-xxx(事件名)	click, abort, blur, change, dblclick, error, focus, keydown, keypress, keyup, unload, load, mousedown, mousemove, mouseout, mouseover, mouseup, reset, resize, submit

    groot.view("myview", function (vm, ve) {
        vm.data = {
            say: 1,
            say2: 2
        }
        ve.fuzhi = function () {
            $(this).hide();//this为出发触发事件的元素,在变量监控里  this也为触发事件的元素
            vm.data = {say: 10, say2: 50}
            vm.dataRender();
        }
    })
    

gt-watch(变量监控指令)

用于监控属性变化

格式	用法
gt-watch(函数)	gt-watch放在要监控的变量所在的标签里(gt-value,gt-valule-change,gt-valule-blur,gt-radio,gt-select,gt-check,gt-ui和扩展属性)，函数定义在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" 详见示例7
递归	用于绑定树 详见示例14

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对象宽 详见示例12
height	docment对象高 详见示例12

UI控件定义(2.0改为)

函数groot.widget[控件名] = function (element, id, data, value, upParent)

参数	用法
element	控件所在的html容器 即<span gt-widget="name(mywidget)"></span>
id	系统为控件生成的唯一id
upParent	同步父vm得值函数
data	初始化控件所用值;如果需要初始化数据 <span gt-widget="name(mywidget)" gt-widget-data="{key:'张三'}"> data就会接受到，并自动转为json对象 也可以这样初始化 groot.widgetInit["test"]={"key":"GUJ778-090909"} <span gt-widget="name(mywidget)" gt-widget-data="widgetInit[test]">

UI控件定义相关

名称	用法
widgetvalue	当改变父vm的属性值的时候的值的时候，程序是通过 控件的widgetvalue 来更新控件的值的，所有每个控件必须有widgetvalue属性
gt-widget-id	控件id，如果不设置 系统生成默认值 如果设置 groot.vms[id],即控件 通过操作可以操作控件groot.vms[id]
gt-widget-data	初始化控件所用值
groot.createElement(html片段,id,element)	把html加入element; 只有用groot.creatElement函数 控件才会被系统的垃圾回收机制回收

代码示例 (示例widget.js)

   groot.widget["mywidget"] = function (element, id, data, value, upParent) {
        groot.createElement("<span gt-text=\"{widgetvalue}\" style='color: red'></span><input gt-click=\"change\" type='button' value='控件'>", id,element);
        var moudle = groot.view(id, function (vm, ve) {
            vm.widgetvalue = value;
            ve.change = function () {
                vm.widgetvalue = "李四";
                vm.widgetvalueRender();
                upParent();
            }
        });
    }
            

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-id	控件id，如果不设置 系统生成默认值 如果设置 groot.vms[id],即控件 通过操作可以操作控件groot.vms[id]
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();
            }
        });
    }
            

groot.UIComponent(2.0新增)

groot.UIComponent

名称	用途
groot.UIComponent(config)	组件化开发,config为对象参数
config.urll	组件路径
config.id	容器id
config.data	初始化数据示例

     var UIC = groot.UIComponent({
        url: "UIComponent/list",
        id: "list",
        data: [{//初始化数据
            img: "images/peter-avatar.jpg",
            sex: "0",
            sexState: false,
            info: "继Kim Yeo-hui走红网络之后，一名利用谷歌Android手机伴奏，展示一流唱功",
            infoState: false
        }]
    })
            

系统API

GrootJs 系统常用API

名称	用途
groot.absUrl(url)	把相对路径转换为绝对路径
groot.model	把vm对象转换为json 去掉系统生成的的属性groot.model