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. Kafka 分布式的，基于发布/订阅的消息系统

    Kafka是一种分布式的,基于发布/订阅的消息系统.主要设计目标如下: 通过O(1)的磁盘数据结构提供消息的持久化,这种结构对于即使数以TB的消息存储也能够保持长时间的稳定性能. 高吞吐量:即使是非常 ...

  2. 玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

    在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...

  3. c#操作IIS站点

    /// <summary> /// 获取本地IIS版本 /// </summary> /// <returns></returns> public st ...

  4. 知道创宇研发技能表v3.1

    by @知道创宇(www.knownsec.com) @余弦 & 404团队 后续动态请关注微信公众号:Lazy-Thought 说明 关于知道创宇 知行合一 | 守正出奇 知道创宇是一家黑客 ...

  5. CentOS 6.3下配置iSCSI网络存储

    一.简介 iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够 ...

  6. Log4Net根据不同的Logger名称，生成日志文件到不同的地方。

    1.定义日志记录类 1: public class Log4NetLogger : ISystemLogger 2: { 3: static log4net.ILog securityLogger = ...

  7. [转]怎么在MVC中使用自定义Membership

    本文转自:http://www.cnblogs.com/angelasp/p/4078244.html 首先我们来看看微软自带的membership: 我们打开系统下aspnet_regsql.exe ...

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

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

  9. ZBrush中怎样对遮罩进行反选

    通过对ZBrush的学习,我们知道了如何手动创建遮罩,手动创建遮罩相对来说是最简单有效的方法,在某些特定的使用场合会起到事半功倍的效果.创建遮罩我们可以结合Ctrl键在物体保持编辑的状态下来执行,您可 ...

  10. lock关键字只不过是C#提供的语法糖

    lock关键字只不过是C#提供的语法糖, 最终使用的还是Monitor类. Monitor类的Enter方法要求传入的参数不为null, 否则会有ArgumentNullException excep ...