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="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文档的更多相关文章

C#给PDF文档添加文本和图片页眉
页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...
dotNET跨平台相关文档整理
一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Windows之外的平台,在工作之余花了很多时间在M ...
ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
ABP文档 - EntityFramework 集成
文档目录本节内容: Nuget 包 DbContext 仓储默认仓储自定义仓储特定的仓储基类自定义仓储示例仓储最佳实践 ABP可使用任何ORM框架,它已经内置了EntityFrame(以下 ...
ABP文档 - SignalR 集成
文档目录本节内容: 简介安装服务端客户端连接确立内置功能通知在线客户端帕斯卡 vs 骆峰式你的SignalR代码简介使用Abp.Web.SignalR nuget包,使基于应用 ...
ABP文档 - 通知系统
文档目录本节内容: 简介发送模式通知类型通知数据通知重要性关于通知持久化订阅通知发布通知用户通知管理器实时通知客户端通知存储通知定义简介通知用来告知用户系统里特定的事件发 ...
ABP文档 - Hangfire 集成
文档目录本节内容: 简介集成 Hangfire 面板授权简介 Hangfire是一个综合的后台作业管理器,可以在ABP里集成它替代默认的后台作业管理器,你可以为Hangfire使用相同的后台作业 ...
ABP文档 - 后台作业和工作者
文档目录本节内容: 简介后台作业关于作业持久化创建一个后台作业在队列里添加一个新作业默认的后台作业管理器后台作业存储配置禁用作业执行 Hangfire 集成后台工作者创建一个后台 ...
ABP文档 - Javascript Api
文档目录本节内容: AJAX Notification Message UI Block & Busy Event Bus Logging Other Utility Functions A ...

随机推荐

烂泥：nagios学习（四）：pnp4nagios图形化绘制nagios数据
本文由秀依林枫提供友情赞助,首发于烂泥行天下在nagios安装完毕后,我们也添加了一些监控对象,但是你会发现nagios只是简单的给我们列出那些监控对象是正常的,而没有把这些监控对象的数据进行整合. ...
国内Hadoop应用现状
Hadoop在国内主要以互联网公司为主,下面主要介绍大规模使用Hadoop或研究Hadoop的公司. 1. 百度百度在2006年就关注了Hadoop并开始调研和使用,截止2012年,总的集群规模超过 ...
nodejs学习资料
官方文档阿里nodejs7天快速教程从零开始nodejs系列文章一个周末掌握IT前沿技术之node.js篇 nodejs中文api文档 nodejs中文api文档(0.12.2) node ...
java enum(枚举）的使用
在实际编程中,往往存在着这样的“数据集”,它们的数值在程序中是稳定的,而且“数据集”中的元素是有限的. 例如星期一到星期日七个数据元素组成了一周的“数据集”,春夏秋冬四个数据元素组成了四季的“数据集” ...
通过SecureCRT访问亚马逊Amazon EC2主机
亚马逊推出了免费的云主机服务器 Amazon EC2,它是通过安全密钥来访问主机的. 问题是下载的密钥在SecureCRT 上无法直接使用,需要转换. 下面的方法可以在自己的linux主机上生成sec ...
【转】Android编程判断手机or平板
转载自:http://www.cnblogs.com/sunzn/p/3663363.html /** * 判断当前设备是手机还是平板,代码来自 Google I/O App for Android ...
新手必学的java报表开发工具FineReport实用技巧
1.在制作模板时,如何将报表中的值传递到超链接网页呢? 在项目中以frame方法把F1.CPT放到项目的页面中,对F1.CPT做网络报表超链接F2.CPT,然后在F2.cpt页面中,做个超链接的网页, ...
WEB安全--逻辑漏洞
业务逻辑问题是一种设计缺陷.逻辑缺陷表现为设计者或开发者在思考过程中做出的特殊假设存在明显或隐含的错误.精明的攻击者会特别注意目标应用程序采用的逻辑方式,设法了解设计者与开发者做出的可能假设,然后考虑 ...
单调队列优化DP，多重背包
单调队列优化DP:http://www.cnblogs.com/ka200812/archive/2012/07/11/2585950.html 单调队列优化多重背包:http://blog.csdn ...
switch结构的用法
已知学生的名字和百分制分数.要求根据学生的百分制分数,分别采用"满分","优秀","良好","及格"和"不及格 ...

grootJsAPI文档

groot.view(name,factory)

xxxRender()

对象绑定

代码示例

数组操作方法

属性绑定

事件绑定

gt-watch(变量监控指令)

事件参数$self

时间属性过滤器 _.d({属性},格式))

require()

gt-include

groot.filter({过滤器名称:function(属性,格式)},...)

代码示例 (GrootJs865行)

groot.bindExtend({name:属性名,Handler(elment, value))},...)

代码示例 (GrootJs840行)

系统扩展属性

UI控件定义

代码示例 (示例ui.js)

系统API

grootJsAPI文档的更多相关文章

随机推荐

热门专题

代码示例
(GrootJs865行)

代码示例
(示例ui.js)