index13.html

<html>
<head>
    <title>ui控件定义</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="groot.js"></script>
</head>
<body>
<div gt-view="myview">
    <ul gt-each="list">
        <li gt-class="$index(back0:value % 2 ==0,back1:value % 2==1)"><span
                gt-text="{$index}+1"></span><span>姓名:</span><span
                gt-text="{name}"></span>---<span>性别:</span><span
                gt-text="{sex}"></span> <input type="text" gt-wach="mychange" gt-value-change="name"><span gt-ui="name(myui)"></span></li>
    </ul>
</div>
</body>
</html>
<script> 
    require("./ui");
    groot.view("myview", function (vm, ve) {
        vm.list = [
            {"name": "张三", "sex": "男"}
            ,
            {"name": "李四", "sex": "男"}
            ,
            {"name": "王五", "sex": "男"}
        ];
        ve.mychange = function ($self, value) {
            groot.log("第" + $self.$index + "项在变化,新值为\"" + value + "\"");
        }
    })
</script>

要用一个空间首先要在js 引用控件 require(""./ui);

在html里面绑定控件<span gt-ui="name(myui)"></span>  name为属性名称 myui为控件名称

下面是该控件的定义

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();
        }
    });;
}

函数groot.ui["myui"] 中 myui 为控件名称，他有四个参数

element 为 控件所在的html容器 即<span gt-ui="name(myui)"></span>

id为系统为控件生成的id value

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]"></span>

data 可以用这两种方式赋值

groot.createElement("<span gt-text=\"{uivalue}\" style='color: red'></span><input gt-click=\"change\" type='button' value='控件'>", id,element);

把html加入element 必须用groot.creatElement函数 这样 这个空间才会被系统的垃圾回收机制回收、

控件必须有一个属性uivalue ，这个属性是和父VM交互用 并且uivalue更新的时候必须调用upParent()来同步父视图

grootJS ui控件定义的更多相关文章

  1. Quartz2D-二维画图引擎 、自己定义UI控件

    // // MyDraw.m // 绘图 #import "MyDraw.h" @implementation MyDraw //Quartz2D 是一个二维绘图引擎 //自己定义 ...

  2. ANDROID L——Material Design详解（UI控件）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  3. 富客户端 wpf, Winform 多线程更新UI控件

    前言 在富客户端的app中,如果在主线程中运行一些长时间的任务,那么应用程序的UI就不能正常相应.因为主线程要负责消息循环,相应鼠标等事件还有展现UI. 因此我们可以开启一个线程来格外处理需要长时间的 ...

  4. 《深入理解Windows Phone 8.1 UI控件编程》基于最新的Runtime框架

    <深入理解Windows Phone 8.1 UI控件编程>本书基于最新的Windows Phone 8.1 Runtime SDK编写,全面深入地论述了最酷的UI编程技术:实现复杂炫酷的 ...

  5. Silverlight项目笔记1:UI控件与布局、MVVM、数据绑定、await/async、Linq查询、WCF RIA Services、序列化、委托与事件

    最近从技术支持转到开发岗,做Silverlight部分的开发,用的Prism+MVVM,框架由同事搭好,目前做的主要是功能实现,用到了一些东西,侧重于如何使用,总结如下 1.UI控件与布局 常用的主要 ...

  6. [BS-01] 根据字符串对象的参数自动计算用来显示该字符串的UI控件的宽和高

    根据字符串对象的参数自动计算用来显示该字符串的UI控件的宽和高 1.  影响昵称Label的高和宽的因素: 字体和字号大小.文字多少.高度取决于是否固定了宽度(是否限制了最大的宽度和高度) 2. 使用 ...

  7. C#子线程更新UI控件的方法总结

    http://blog.csdn.net/jqncc/article/details/16342121 在winform C/S程序中经常会在子线程中更新控件的情况,桌面程序UI线程是主线程,当试图从 ...

  8. Android4.0 -- UI控件之 Menu 菜单的的使用(三)

    上一讲 [Android 开发]:UI控件之 Menu 菜单的的使用(二) 我们讲解了创建上下文菜单的第一种使用方式:Creating a floating context menu [创建悬浮的上下 ...

  9. C#学习之在辅助线程中修改UI控件----invoke方法

    Invoke and BeginInvoke 转载地址:http://www.cnblogs.com/worldreason/archive/2008/06/09/1216127.html 在Invo ...

随机推荐

  1. 《SQL Server企业级平台管理实践》读书笔记——当我们的备份都已经损坏的时候该怎么办

    作为数据库管理员最最痛苦的莫过于,当数据库宕机的时候需要找备份,但在这个时候突然发现备份文件也是坏的,这就意味着数据会丢失,为此可能会丢掉职位,饭碗不保,所以为此,我们一定要保证好备份的完整性,一般发 ...

  2. Jena学习笔记(2)——利用数据库保存本体

    注明:本文档是使用Jena2.6.4,数据库为MySQL,数据库驱动版本为mysql-connector-java-5.1.13-bin.jar. 1 Jena的数据库接口 Jena提供了将RDF数据 ...

  3. sql server 2005 32位+64位、企业版+标准版、CD+DVD 下载地址大全 .

    企业版DVD SQL Server 2005 Enterprise Edition(支持超大型企业) 32 位DVD: ed2k://|file|cs_sql_2005_ent_x86_dvd.iso ...

  4. OO的设计原则

    今天同事和我们一起讨论分享了OO的设计原则,讨论使人明晰,有人一起讨论学习是一件幸福的事情. 1.开闭原则 对功能的扩展是开放的,对修改是闭合的. 可以应用于类的设计,框架的设计等. 为什么?开闭原则 ...

  5. [转]ionic项目之上传下载数据

    本文转自:http://blog.csdn.net/superjunjin/article/details/44158567 一,首先是上传数据 记得在angularjs的controller中注入$ ...

  6. HBase性能调优

    因官方Book Performance Tuning部分章节没有按配置项进行索引,不能达到快速查阅的效果.所以我以配置项驱动,重新整理了原文,并补充一些自己的理解,如有错误,欢迎指正. 配置优化 zo ...

  7. Java之美[从菜鸟到高手演变]之JVM内存管理及垃圾回收

    很多Java面试的时候,都会问到有关Java垃圾回收的问题,提到垃圾回收肯定要涉及到JVM内存管理机制,Java语言的执行效率一直被C.C++程序员所嘲笑,其实,事实就是这样,Java在执行效率方面确 ...

  8. dipole antenna simulation by HFSS

    工作频点为1GHz,新建工程,添加新设计,编辑添加下面的变量 建立天线模型,即两个金属圆柱.编辑完一个振子后,另一半可以用镜像命令产生参数如下设置 ,材料为PEC 两个圆柱间建立一个矩形片,连接两个圆 ...

  9. 『转载』使用TortoiseSVN客户端

    原文地址:https://www.sinacloud.com/doc/sae/tutorial/code-deploy.html#shi-yong-git-ke-hu-duan TortoiseSVN ...

  10. [转载]ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...