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

随机推荐

10个开源的PHP网站内容管理系统
1. DEDE -这是一款国内开源的cms,作者是一个个人,能做出如此功能的cms,是相当不错的.2007版功能十分强大,希望能改善之前数据量一大,更新静态页就很慢的缺点.因为开源,有较多的玩家和拥护 ...
gulp系列：自动构建及刷新浏览器
2016年3月3日 14:50:15 晴 .清空目录常用插件 gulp-clean .del (nodejs模块)del = require('del')#2.文件复制原生模块gulp,插 ...
x01.os.8: 加载内核
在 x01.os.7 中,借助 freedos,学习了保护模式.但操作系统必须完成引导:boot, 加载内核:loader,kernel,进而管理process,memory,file等. 引导比较简 ...
jsp html5 video实现在线视频播放源码，支持IE6,7,8,10,11，谷歌，火狐等浏览器
jsp源码: <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...
@Value取不到值引出的spring的2种配置文件applicationContext.xml和xxx-servlet.xml
项目中经常会用到配置文件,定义成properties的形式比较常见,为了方便使用一般在spring配置文件中做如下配置: <context:property-placeholder ignore ...
使用jquery合并表格中相同文本的相邻单元格
一.效果二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...
c++关于析构的那点小事（个人吐槽向
#include<iostream> using namespace std; class test { int *i; public: test(int n) { i = new int ...
关于电磁场中的E.B.D.H的理解
电磁场理论中存在四个基本物理量,电场强度E,磁场强度H,电场通量密度D,磁场通量密度B. E:其中E和H最简单,电场中的电荷受到电场力的作用,单位电荷受的力称为电场强度,这种定义得到E的单位为N/C, ...
cuda多线程间通信
#include "cuda_runtime.h" #include "device_launch_parameters.h" #include <std ...
[cocos2d-x]深入--几个代表性的类 (续)
摘要: 此文对cocos2d-x引擎中最具代表性,最能体现框架结构的几个类做了简单的介绍, 包括Director,Application, Renderer, EventDispatcher, Sch ...

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)