grootJsAPI文档
groot.view(name,factory)
参数 | 用途 |
---|---|
name | 创建的modelView的名称,用groot.vms[name]可以访问到创建的对象 |
factory | 函数:有两个参数:vm,ve,分别放属性和事件 |
返回 | 一个modelView对象 |
xxxRender()
场景 | 用法 |
---|---|
属性 | xxxRender()调用。没有参数;xxx为属性名 |
对象 | xxxRender()调用。没有参数;xxx为对象名 |
数组 | xxxRender(index)调用。xxx为数组名,当无参数时,更新整个数组;有参数时,更新数组对应的项 |
对象绑定
参数 | 用途 |
---|---|
无 | 用于绑定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>
数组操作方法
方法名 | 用法 |
---|---|
xxxpush() | 同数组push()方法 |
xxxpop() | 同数组pop() |
xxxshift() | 同数组shift() |
xxxunshift() | 同数组unshift()方法 |
xxxsplice() | 同数组splice()方法 |
xxxconcat() | 同数组concat()方法 |
属性绑定
指令 | 用法 |
---|---|
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("./路径"); 引用进来 |
事件绑定
格式 | 指令 |
---|---|
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()
格式 | 用法 |
---|---|
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();
}
}
}
)
系统扩展属性
属性名 | 用法 |
---|---|
show | docment对象是否显示 true显示,false隐藏 |
width | docment对象宽 |
height | docment对象高 |
disabled | input textArea 属性 false 为 disabled true 可编辑 |
readonly | input textArea 属性 false 为 readonly true 可编辑 |
UI控件定义
参数 | 用法 |
---|---|
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"}
|
名称 | 用法 |
---|---|
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
名称 | 用途 |
---|---|
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 ...
随机推荐
- web会话管理
http协议是无状态的协议,也就是说服务器不知道这个http连接是那个浏览器发过来的. 要标识会话的唯一,有两种方法:1 Cookie 2 会话级cookie(开关浏览器算一次会话) 和 持久化的c ...
- Javascript刷新页面的几种方法
Javascript刷新页面的几种方法: window.navigate(location)location.reload()location=locationlocation.assign(loca ...
- 谷歌/微软/必应web页面免费翻译插件
随着网络时代的日益壮大,现在我们经常需要浏览一些各种外语的网页,或者是查阅资料帮助我们解决问题.更多的时候还是头疼在语言障碍上,正所谓"它认识你,你不认识它啊."谷歌和微软两个企业 ...
- oracle存储过程、函数、序列、包
一. 存储过程 1. 语法 create or replace procedure procedureName(seqName varchar2) is /*声明变量*/ n ); cursor cu ...
- 烂泥:openvpn双网卡客户端与内网机器通信
本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 前段时间写了一篇有关openvpn搭建与内网机器通信的文章,那篇文章是基于服务器单网卡 ...
- CCommandManager 类
CCommandManager类 CCommandManager 类管理命令及其与图像的关联.描述CCommandManager :: CleanUp从命令列表和全局和用户映射中删除所有元素.CCom ...
- SQL Server With 递归 日期 循环
要实现的效果:查询从Date From 到 To 之间的 所有日期: 示例代码如下: DECLARE @DATE_FROM DATETIME = N'2016-05-16';--N'2015-05-1 ...
- UVALive 5061 Lightning Energy Report --LCA
题意:给一棵树,每次给u到v的路径上所有点加上一个值,最后输出每个点的权值(初始为0) 解法:每次在u,v间加k时,只要让u,v点的权值加上k,u,v的LCA处减去k(因为LCA的子树中加了两个k), ...
- UI坐标变换/转换
InverseTransformPoint Transform.InverseTransformPoint :相对于谁的坐标.如果是相对2D UI,请使用localposition,如果是3D场景,请 ...
- luogu1328[NOIP2014 T1]生活大爆炸版石头剪刀布
题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的 ...