index13.html

  1. <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为控件名称

下面是该控件的定义

  1. 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对象

也可以

  1.  groot.uiInit["test"]={"key":"GUJ778-090909"}
  2. <span gt-ui="name(myui)" gt-ui-data="uiInit[test]"></span>

data 可以用这两种方式赋值

  1. 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. Linux LDAP Server--->Clients配置

    Linux Ldap Configuration LDAP Server Base Software & SysTem Info SysTem Info 系统版本:centos 6.4 LDA ...

  2. ElasticSearch Filter Aggregations

    类似于sql语句中where子句的作用 { "query": { "match_all": {} }, "aggs": { "ag ...

  3. 简答哈希实现 （nyoj 138 找球号2）

    例题链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=138 代码目的:复习哈希用 代码实现: #include "stdio.h&qu ...

  4. Hive remote install mode (mysql) step by step

    Prerequisite: Hadoop cluster is avalable; Mysql installed on namenode; Step1: download the latest hi ...

  5. python singleton

    方法一:用元类的方式实现一个singleton. liuxiaoyan@development:~/mysite$ cat Singleton.py class Singleton(type): &q ...

  6. 【转载】PMC/PEC Boundary Conditions and Plane Wave Simulation

    原文链接 PMC/PEC Boundary Conditions and Plane Wave Simulation (FDTD) OptiFDTD now has options to use Pe ...

  7. 【Android Demo】加载.gif格式图片

    Android系统为了节省内存,一般不支持直接显示gif图片,即使你强制设置了,也只会显示图片的第一帧. 这个 Demo 是在网上看到的,是个思路,还是有些局限性,还是记录下,以后研究吧. 1.效果图 ...

  8. 【读书笔记《Android游戏编程之从零开始》】9.游戏开发基础（如何快速的进入 Android 游戏开发）

    1.不可盲目看API文档很多人在接触学习一门新的平台语言时,总喜欢先去探究一番API文档.先不说成效如何,至少编者认为这种方式不适合大部分人来效仿,主要原因在于 API 领域广泛,牵涉到的知识点太多, ...

  9. codeforces 711E E. ZS and The Birthday Paradox(数学+概率)

    题目链接: E. ZS and The Birthday Paradox. time limit per test 2 seconds memory limit per test 256 megaby ...

  10. Android网络之数据解析----SAX方式解析XML数据

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...