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 ...

随机推荐

java 生成和解析二维码
public class QRCode { /** * 解析二维码(QRCode) * @param imgPath * @return */ public static String decoder ...
java中equals和"=="的区别
"=="号,它比较的是一个对象在内存中的地址值, 比如2个字符串对象String s1 = new String("str");String s2 = new ...
将表里的数据批量生成INSERT语句的存储过程继续增强版
文章继续桦仔兄的文章将表里的数据批量生成INSERT语句的存储过程增强版继续增强... 本来打算将该内容回复于桦仔兄的文章的下面的,但是不知为何博客园就是不让提交!.... 所以在这里贴出来吧 ...
[转]正确配置Linux系统ulimit值的方法
在Linux下面部署应用的时候,有时候会遇上Socket/File: Can't open so many files的问题:这个值也会影响服务器的最大并发数,其实Linux是有文件句柄限制的,而且L ...
Linux下NDK编译FFMPEG包含neon参数
FFMPEG编译成Android库已经有很多案例了,编译优化neon的也很多,以下是我通过实践成功的案例,这里主要讲编译的配置文件,其他设置可结合Linux下使用NDK编译FFMPEG(libstag ...
C语言中不同函数之间怎么传值？
#include <stdio.h> int change(); int change(int j) { j=; return(j); } void main() { int b = ch ...
scala 第一课
val msg="Hello,World" Scala 可以根据赋值的内容推算出变量的类型.这在Scala语言中成为"type inference". Scal ...
git 学习使用总结一(本地操作)
通过几天的学习,熟悉了 git 的一些常用命令,要用熟练和操作更复杂的功能还必须继续学习.不过 git 作为工具,它是用来提高我们的工作效率的工具,系统的学习之后可以暂且放放,等到以后实际项目中用到了 ...
Pairs Forming LCM(素因子分解)
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=109329#problem/B 全题在文末. 题意:在a,b中(a,b<=n) ...
PHP之图像处理
PHP中提供了一些对图像进行编辑处理的函数,其中最为典型的应用为随机图形验证码.图片水印以及数据统计中饼状图和柱状图的生成等 PHP中有的图形函数可以直接使用,但多数需要在安装了GD2函数库后才能使用 ...

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)