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

随机推荐

php中文乱码问题
HTML中文乱码问题的解决方法. 比如有个index.html的页面(这里是指真正的静态页面,修改服务器的……伪静态的请看方案B) 1.在head标签里面加入这句 <head> <m ...
mysql-3 检索数据（1）
SELECT 语句 SELECT检索表数据,必须至少给出两条信息--------想选择什么,以及从什么地方选择. 检索一个列 SELECT prod_name FROM products; 上述语句利 ...
Servlet/JSP-06 Session
一. 概述 Session 指客户端(浏览器)与服务器端之间保持状态的解决方案,有时候也用来指这种解决方案的存储结构. 当服务器端程序要为客户端的请求创建一个 Session 时,会首先检查这个请求里 ...
ELF Format 笔记（一）—— 概述
ilocker:关注 Android 安全(新手) QQ: 2597294287 ELF Object files 参与程序的链接和执行,从这两个角度分别有两种视图: ELF header 位于文件的 ...
MMORPG大型游戏设计与开发（客户端架构 part3 of vegine）
无论在何处在什么地方,我们都或多或少的接触到数学知识.特别是在客户端中,从打开界面的那一刻起就有太多与数学扯上的关联,如打开窗口的大小,窗口的位置,窗口里面的元件对象,以及UI的坐标等等.而在进入游戏 ...
ComboBox的联动
窗体搭建: 实现功能: 加载年级下拉框选中年级时加载出科目下拉框加载年级下拉框: 第一步,在DAL层中写一个方法,检索所有的年级名称集合,返回的是泛型集合List<> public L ...
Unity3D粒子系统合集
http://www.cnblogs.com/qinyuanpei/p/3659513.htmlhttp://www.cnblogs.com/qinghuaideren/p/3597666.html
noip模拟赛（一）宠物之战
宠物之战 (senso.pas/c/cpp) [问题描述] 众所周知,moreD的宠物已经被moreD奴役得体无完肤.这只宠物实在忍无可忍,把自己每天走魔法树的经历告诉了自己的宠物.同时他还说明了自己 ...
poj 3468
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 90736 Acc ...
排序及重复元素去重的说明，TreeSet,HashSet
先看下面一段代码: package 类集; import java.util.Set; import java.util.TreeSet; class Person{ private String n ...

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)