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. 最短路径之迪杰斯特拉（Dijkstra）算法

    迪杰斯特拉(Dijkstra)算法主要是针对没有负值的有向图,求解其中的单一起点到其他顶点的最短路径算法.本文主要总结迪杰斯特拉(Dijkstra)算法的原理和算法流程,最后通过程序实现在一个带权值的 ...

  2. Spring自定义一个拦截器类SomeInterceptor，实现HandlerInterceptor接口及其方法的实例

    利用Spring的拦截器可以在处理器Controller方法执行前和后增加逻辑代码,了解拦截器中preHandle.postHandle和afterCompletion方法执行时机. 自定义一个拦截器 ...

  3. gdb 远程调试 android native 程序

    ilocker:关注 Android 安全(新入行,0基础) QQ: 2597294287 先看一张原理图: 我是 Linux 和 Android 双料 0 基础,目前对 gdb 了解的很浅显.(注意 ...

  4. python module getopt usage

    import getopt import sys def usage(): print 'this is a usage.' def main(): try: print sys.argv #sys. ...

  5. Excel Sheet Column Number

    Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, retur ...

  6. struts2 基本用法

    Struts2必需库: commons-fileupload.jar.commons-io-1.3.2.jar.freemarker-2.3.16.jar.javassist-3.7.ga.jar.o ...

  7. 【转】C语言位运算符：与、或、异或、取反、左移与右移详细介绍

    转载自:http://www.jb51.net/article/40559.htm,感谢原作者. 以下是对C语言中的位运算符:与.或.异或.取反.左移与右移进行了详细的分析介绍,需要的朋友可以过来参考 ...

  8. 无向图的最短路径算法JAVA实现

    一,问题描述 给出一个无向图,指定无向图中某个顶点作为源点.求出图中所有顶点到源点的最短路径. 无向图的最短路径其实是源点到该顶点的最少边的数目. 本文假设图的信息保存在文件中,通过读取文件来构造图. ...

  9. POJ 2464 Brownie Points II --树状数组

    题意: 有点迷.有一些点,Stan先选择某个点,经过这个点画一条竖线,Ollie选择一个经过这条直接的点画一条横线.Stan选这两条直线分成的左下和右上部分的点,Ollie选左上和右下部分的点.Sta ...

  10. xampp 用phpmyadmin在页面上修改密码后，无法登陆，密码没问题

    xampp 用phpmyadmin在页面上修改密码后,无法登陆,密码没问题一直提示密码错误, 什么原因? ------解决方案--------------------改了密码之后,phpmyadmin ...