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...codereturn 返回值}})
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
|
转载于:https://www.cnblogs.com/blowfish/p/4644585.html
grootJsAPI文档相关推荐
- 导出swagger2生成的文档
百度了好多篇用法,没法用.特此记录一下 一.下载项目 下载https://github.com/Swagger2Markup/spring-swagger2markup-demo下的项目,保存,注意文 ...
- README 规范和项目文档规范
1. README 规范 我们直接通过一个 README 模板,来看一下 README 规范中的内容: # 项目名称<!-- 写一段简短的话描述项目 -->## 功能特性<!-- 描 ...
- FastAPI 自动生成的docs文档没法使用
FastAPI 自动生成的docs文档没法使用,当展开路径时候一直在转圈,具体就是这样 这个是由于swagger-ui 3.30.1 中的bug导致,具体bug可以看这里 我们可以通过在FastAPI ...
- 【软件工程】VB版机房文档总结
前言: 软工视频+软工文档+UML视频+UML图的学习过程图! 这部分的知识很厚,只是知道了个大概!最开始 慢悠悠的像个老爷爷走进度,后来遇到点什么事,妈呀,管不了那么多了,赶紧弄完在说,拖了多久了都 ...
- 智能文档理解:通用文档预训练模型
预训练模型到底是什么,它是如何被应用在产品里,未来又有哪些机会和挑战? 预训练模型把迁移学习很好地用起来了,让我们感到眼前一亮.这和小孩子读书一样,一开始语文.数学.化学都学,读书.网上游戏等,在脑子 ...
- 基于javaGUI的文档识别工具制作
基于javaGUI的文档识别工具制作 对于某些文本,其中富含了一些标志,需要去排除,以及去获得段落字数,以下是我个人写的一个比较简单的文档识别工具,含导入文件.导出文件以及一个简单的识别功能. 1.功 ...
- 从单一图像中提取文档图像：ICCV2019论文解读
从单一图像中提取文档图像:ICCV2019论文解读 DewarpNet: Single-Image Document Unwarping With Stacked 3D and 2D Regressi ...
- 函数小知识点（文档字符串，闭包等）
1 文档字符串(Documentation Strings) 一般被称为docstring,一款你应当使用的重要工具,它能够帮助你更好地记录程序并让其更加易于理解.令人惊叹的是,当程序实际运行时,我们 ...
- Spring Boot 集成Swagger2生成RESTful API文档
Swagger2可以在写代码的同时生成对应的RESTful API文档,方便开发人员参考,另外Swagger2也提供了强大的页面测试功能来调试每个RESTful API. 使用Spring Boot可 ...
最新文章
- 硕士Nature一作谈回乡当公务员：考公竞争激烈，科研经历是宝贵财富
- Struts2学习笔记（六）：Struts2的处理流程与Action的管理方式
- Indian Scientists Design Device to Collect Solar Energy 印度科学家设计太阳能收集设备
- 【机器学习_2】机器学习资料
- 详细设计 存储分配_【存储论文笔记】Windows Azure Storage
- 《探讨大规模无线通信》-高西奇教授 讲座记录
- 给js对象定义属性的方法
- ImageAI (一) 使用Python快速简单实现图像内容预测 Image Prediction
- uniapp实现打印PDF文件
- Error: java.lang.RuntimeException: Crunching Cruncher xxx.9.png failed,
- 安装完成postgresql 后，启动大象pgAdmin4 报the application server could not be contect 错误
- 后缀是lnk是什么文件_ink是什么文件
- 重磅！我组问卷调查结果公布
- win10 计算机管理器没有ime,win10电脑任务栏输入法初选ime禁用的解决方法
- 无法更新计算机配置系统时间,电脑怎么设置系统时间自动更新
- 数值方法——薄板样条插值（Thin-Plate Spline）
- [C]你的n元一次常系数线性方程组解答小助手
- 思岚科技通用机器人底盘ZEUS将亮相2019 CES
- 给定一个由N个非负整数构成的序列，我们来定义一下序列的中位数，如果N是奇数，在对序列排序后，中位数就是最中间的那个数，即排序后，中位数的位置为(N+1)/2，这里序列的位置从1开始。如果N是偶数，则中
- java comm api_java基于RXTXcomm.jar的串口通信
热门文章
- (二)javascript中int和string转换
- 解决centos6.4 启动dell omsa 失败
- 深度剖析CloudFoundry的架构设计
- Cisco ASA ‘LU allocate xlate failed’排错一例
- Python压缩文件夹/解压缩zip文件
- php评论倒序 zblog_zblogPHP评论链接加密并美化跳转的完美方法
- python运维脚本部署jdk_Jenkins 为Jenkins添加Windows Slave远程执行python项目脚本
- 顺序表常见操作实现之一
- JSON与MAP之间的转换
- AngularJS Eclipse——新手入门【翻译+整理】
