grootJs简明教程

mvvm框架也是解决的一类问题,在某些时候会提高生产效率;

经过接近一个月的努力,grootJs测试版终于发布了

grootJs是一个mvvm的框架,名字取 grass 和root 两个单词的组合,既“草根”之意。在创作的中,本着尽量简单实用的原则构思完成的

grootJs不同于其他mvvm的三大亮点:

1.model模型自动回收。在框架中加入了垃圾回收机制,程序员不回再为了因不断创建大量modle不能回收,或不便于回收造成内存占用太高而烦恼

2.全新的变量值变化监模型,改善其他mvvm框架对一些动态数组中得变量变化不便于监控的问题

3.全新的ui控件开发接口,是控件的值和页面页面模型的值实现同步,操作开发的控件时 就像操作html内置控件一样

还有更多的新的东西等待你的发觉....

项目地址 https://github.com/time-go/grootJs

Grootjs官网(最新文档在官网更新)

官网:http://time-go.github.io/grootJs

作者联系方式:qq289880020,官方技术支持QQ群330603020 如有bug 疑问 或问题 请联系作者:-)

Hello word(index1.html)

博客园上的教程不再更新

<html>
<head>
<title>hello word</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">
<input type="text" gt-value-change="say">+<input type="text" gt-value-change="say2"><span
gt-text="{say}+{say2}"></span>
</div>
<input type="button" value="点击" gt-click="fuzhi">
</div>
</body>
</html>
<script>
groot.view("myview", function (vm, ve) {
vm.data = {
say: 1,
say2: 2
}
/*vm.say = 1;
vm.say2 = 20;*/
ve.fuzhi = function () {
vm.data = {say: 10, say2: 50}
vm.dataRender();
}
})
</script>

说明:程序中首先引jquery,框架的docment操作都是基于jquery的。

gt-view="myview" 是定义一个作用于为myview的范围,对应的在js里也有一个 groot.view("myview"...,这个两个是相对应得;

vm是数据模型,它有个属性为say,gt-value-change=“say”为绑定这个say属性 change 表示 输入框的值变化 vm中say的值就变化;

相应 change该为blur,就  是 输入框失去焦点的时候 vm.say得值变化;gt-text="say"得意义找个标签的内容绑定vm.say的值;

大家可以看到随着输入框的值变化,右边标签的值也在变化

目录

绑定事件

绑定对象

绑定数组

$self $index $first $last parent() outerParent()

grootJs的属性绑定指令

变量监控 指令 gt-wach

内置模块加载器(commonjs规范)的使用

grootJs 属性过滤器

checkbox radio select绑定

groot 引入外部模板

grootJs属性扩展 groot.bindExtend

grootJS ui控件定义

grootJs 系统常用API介绍

grootjs 简明教程的更多相关文章

  1. 2013 duilib入门简明教程 -- 第一个程序 Hello World(3)

    小伙伴们有点迫不及待了么,来看一看Hello World吧: 新建一个空的win32项目,新建一个main.cpp文件,将以下代码复制进去: #include <windows.h> #i ...

  2. 2013 duilib入门简明教程 -- 部分bug (11)

     一.WindowImplBase的bug     在第8个教程[2013 duilib入门简明教程 -- 完整的自绘标题栏(8)]中,可以发现窗口最大化之后有两个问题,     1.最大化按钮的样式 ...

  3. 2013 duilib入门简明教程 -- 部分bug 2 (14)

        上一个教程中提到了ActiveX的Bug,即如果主窗口直接用变量生成,则关闭窗口时会产生崩溃            如果用new的方式生成,则不会崩溃,所以给出一个临时的快速解决方案,即主窗口 ...

  4. 2013 duilib入门简明教程 -- 自绘控件 (15)

        在[2013 duilib入门简明教程 -- 复杂控件介绍 (13)]中虽然介绍了界面设计器上的所有控件,但是还有一些控件并没有被放到界面设计器上,还有一些常用控件duilib并没有提供(比如 ...

  5. 2013 duilib入门简明教程 -- 事件处理和消息响应 (17)

        界面的显示方面就都讲完啦,下面来介绍下控件的响应.     前面的教程只讲了按钮和Tab的响应,即在Notify函数里处理.其实duilib还提供了另外一种响应的方法,即消息映射DUI_BEG ...

  6. 2013 duilib入门简明教程 -- FAQ (19)

        虽然前面的教程几乎把所有的知识点都罗列了,但是有很多问题经常在群里出现,所以这里再次整理一下.     需要注意的是,在下面的问题中,除了加上XML属性外,主窗口必须继承自WindowImpl ...

  7. Mac安装Windows 10的简明教程

    每次在Mac上安装Windows都是一件非常痛苦的事情,曾经为了装Win8把整台Mac的硬盘数据都弄丢了,最后通过龟速系统恢复模式恢复了MacOSX(50M电信光纤下载了3天才把系统下载完),相信和我 ...

  8. Docker简明教程

    Docker简明教程 [编者的话]使用Docker来写代码更高效并能有效提升自己的技能.Docker能打包你的开发环境,消除包的依赖冲突,并通过集装箱式的应用来减少开发时间和学习时间. Docker作 ...

  9. 2013 duilib入门简明教程 -- 总结 (20)

        duilib的入门系列就到尾声了,再次提醒下,Alberl用的duilib版本是SVN上第个版本,时间是2013.08.15~       这里给出Alberl最后汇总的一个工程,戳我下载,效 ...

随机推荐

  1. mvn archetype:create和mvn archetype:generate

    create is deprecated in maven 3.0.5 and beyond,在maven3.0.5以上版本舍弃了create,使用generate生成项目 before:mvn ar ...

  2. ASP.NET MVC 监控诊断、本地化和缓存

    这篇博客主要是针对asp.net mvc项目的一些常用的东东做一个讲解,他们分别是监控诊断.本地化和缓存.虽然前两者跟asp.net mvc看上去好像是没什么关联. 但其实如果真正需要做asp.net ...

  3. java 自动装箱自动拆箱

    1.Java数据类型 在介绍Java的自动装箱和拆箱之前,我们先来了解一下Java的基本数据类型. 在Java中,数据类型可以分为两大种,Primitive Type(基本类型)和Reference ...

  4. C# 中的占位符本质

    占位符本质 1.占位符是相对于String字符串类型而言的. 2.占位符其实就是调用String.Format()方法.把指定的变量拼接到定义好的字符串模板中组成新的字符串.

  5. 手机打开PDF文档中文英文支持(乱码问题)解决攻略

    电子书的优点很多,随时随地阅读,无论白天黑夜走路坐车都能阅读:想确认一下某句话是不是这本书里的,搜索一下就可以知道:搬家也不用发愁,几万本书带在身上,依然轻松步行.我买了一台平板主要动因就是为了看书, ...

  6. AC日记——大整数的因子 openjudge 1.6 13

    13:大整数的因子 总时间限制:  1000ms 内存限制:  65536kB 描述 已知正整数k满足2<=k<=9,现给出长度最大为30位的十进制非负整数c,求所有能整除c的k. 输入 ...

  7. Unity StartCoroutine 和 yield return 深入研究

    http://www.cnblogs.com/fly-100/p/3910515.html

  8. SilverFoxServer出炉!!

    SilverFoxServer是啥?各位看官搜一下SmartFoxServer便知 是一套服务端+客户端通迅框架,快速搭建起回合制,棋牌类的联机 网页游戏 SilverFoxServer的特点包括 用 ...

  9. FMS 客户端带宽计算、带宽限制

    FMS 客户端带宽计算.带宽限制 1. 带宽计算 FMS内置了带宽检测的特性(被称作"native bandwidth detection"),要进行带宽检测,客户端只要在成功连接 ...

  10. 浅谈Android Fragment嵌套使用存在的一些BUG以及解决方法

    时间 2014-03-18 18:00:55 eoe博客 原文  http://my.eoe.cn/916054/archive/24053.html 主题 安卓开发 自从Android3.0引入了F ...