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

随机推荐

asp.net mvc jQuery 城市二级联动
页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...
SQLServer修改字段类型
Alter table [表名] Alter column [列名] [列类型]
MemSQL分布式架构介绍(一)
最近在了解MemSQL架构,看了些官方文档,在这里做个记录,原文在这里:http://docs.memsql.com/latest/concepts/distributed_architecture/ ...
Linux磁盘管理之元数据、文件和目录、链接文件03
一.存储设备分区简述文件系统最终目的是把大量数据有组织的放入持久性的存储设备,如硬盘.硬盘存储能力具有持久性,不会因为断电而消失,存储量大,但读取速度慢.操作系统读取硬盘的时候,不会一个一个扇区读取 ...
php魔术方法罗列
##__sleep() 和 __wakeup() 当序列化(serialize)对象时,PHP 将试图在序列动作之前调用该对象的成员函数 __sleep() .__sleep() 方法常用于提交未提交 ...
EarthWarrior3D游戏ios源码
这是一款不错的ios源码源码,EarthWarrior3D游戏源码, 并且游戏源代码支持多平台. 适用于cocos v2.1.0.0版本源码下载:http://code.662p.com/view/ ...
Configure Ocserv on CentOS 6
Configure Ocserv on CentOS 6 Table of Contents 1. Install ocserv 2. Configure ocserv 3. How to host ...
linux 下 mysql 安装(不用编译的方式)
环境是centos6.x.相信其他的也大同小异.相对来说这种方式我用的比较多. 一些环境依赖表库: yum install perl yum install libaio 1)下载:在mysql的网站 ...
Android图片开发内幕--基础篇
前言:本来我是做电视应用的,但是因为公司要出手机,人员紧张,所以就抽调我去支援一下,谁叫俺是雷锋呢!我做的一个功能就是处理手机中的应用ICON,处理无非就是美化一下,重新与底板进行合成和裁剪,用到了很 ...
用CSS开启硬件加速来提高网站性能（转）
翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-cs ...

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)