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="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

grootJsAPI文档的更多相关文章

  1. C#给PDF文档添加文本和图片页眉

    页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...

  2. dotNET跨平台相关文档整理

    一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Windows之外的平台,在工作之余花了很多时间在M ...

  3. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  4. ABP文档 - EntityFramework 集成

    文档目录 本节内容: Nuget 包 DbContext 仓储 默认仓储 自定义仓储 特定的仓储基类 自定义仓储示例 仓储最佳实践 ABP可使用任何ORM框架,它已经内置了EntityFrame(以下 ...

  5. ABP文档 - SignalR 集成

    文档目录 本节内容: 简介 安装 服务端 客户端 连接确立 内置功能 通知 在线客户端 帕斯卡 vs 骆峰式 你的SignalR代码 简介 使用Abp.Web.SignalR nuget包,使基于应用 ...

  6. ABP文档 - 通知系统

    文档目录 本节内容: 简介 发送模式 通知类型 通知数据 通知重要性 关于通知持久化 订阅通知 发布通知 用户通知管理器 实时通知 客户端 通知存储 通知定义 简介 通知用来告知用户系统里特定的事件发 ...

  7. ABP文档 - Hangfire 集成

    文档目录 本节内容: 简介 集成 Hangfire 面板授权 简介 Hangfire是一个综合的后台作业管理器,可以在ABP里集成它替代默认的后台作业管理器,你可以为Hangfire使用相同的后台作业 ...

  8. ABP文档 - 后台作业和工作者

    文档目录 本节内容: 简介 后台作业 关于作业持久化 创建一个后台作业 在队列里添加一个新作业 默认的后台作业管理器 后台作业存储 配置 禁用作业执行 Hangfire 集成 后台工作者 创建一个后台 ...

  9. ABP文档 - Javascript Api

    文档目录 本节内容: AJAX Notification Message UI Block & Busy Event Bus Logging Other Utility Functions A ...

随机推荐

  1. 安装mysql odbc遇到error 1918.errror installing ODBC driver mysql ODBC 5.3 ANSI Drive

    环境:Windows server2008r2 安装mysql-connector-odbc-5.3.6-win32 报错 相信错误信息:Error 1918.errror installing OD ...

  2. poi生成word文件

    一.简介 对于poi来说,poi可以完成对word.excel.ppt的处理.word目前有两种文件格式,一种是doc后缀.另一种是docx后缀的.2007之前的版本都是doc后缀的,这种格式poi使 ...

  3. 【mysql】高可用集群之MMM

    一.复制的常用拓扑结构 复制的体系结构有以下一些基本原则: (1)    每个slave只能有一个master: (2)    每个slave只能有一个唯一的服务器ID: (3)    每个maste ...

  4. 使用dwr时动态生成table的一个小技巧

    这篇随笔是我在07年写的,因为当时用了自己建设的blog,后来停止使用了,今天看到备份数据库还在,恢复出来放到这里.留着记录用. 我在使用DWR时,试了很多次都无法在动态生成的table中的一个或多个 ...

  5. Validation failed for one or more entities. See ‘EntityValidationErrors’解决方法

    Validation failed for one or more entities. See ‘EntityValidationErrors’解决方法 You can extract all the ...

  6. 烂泥：NFS做存储与KVM集成

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 以前有关NFS的文章,我们介绍的都是NFS的使用挂载等等.这篇文章我们介绍有关NFS作为存储使用. 既然本篇文章的主题是有关NFS的,我们还是先把NFS ...

  7. my_atoi()

    void my_atoi(const char* s){ int i=0,res=0; if(*s<='9' && *s>='0'){ //如果输入的一个字符是数字 for ...

  8. jquery常用方法

    一.多个按钮绑定同一事件 $("#index_svip,#index_svip_renew").click(function() { seajs.use(['svipLayer'] ...

  9. 这回真的是挤时间了-PHP基础（三）

    hi 刚看了唐人街探案,5星好评啊亲.由于是早就约好的,也不好推辞(虽然是和男的..),但该写的还是得挤时间写.明天早上老师的项目结题,虽然和我关系不大,但不要添乱就好!! 1.PHP  一.PHP基 ...

  10. 2016-2017 CT S03E07: Codeforces Trainings Season 3 Episode 7 - HackerEarth Problems Compilation

    B: 思路: 暴力,每两个判断一下; C: 思路: 容斥定理,先枚举脖子下面那个点和那个不可描述的点,算出所有的方案数,这里面有多的腿当成了脖子或者胳膊的,然后就再枚举这种情况把这些减去,又减多了; ...