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. 深入理解spring中的各种注解

    Spring中的注解大概可以分为两大类: 1)spring的bean容器相关的注解,或者说bean工厂相关的注解: 2)springmvc相关的注解. spring的bean容器相关的注解,先后有:@ ...

  2. 读书笔记——Windows核心编程（2）比较字符串

    1. CompareString 以符合用户语言习惯的方式,EX版本使用UNICODE int CompareString( __in LCID Locale, __in DWORD dwCmpFla ...

  3. java使用httpcomponents发送get请求

    一.适用场景 在ESTful webservice中,get方法一般都是用来获取数据.我们可以使用httpcomponents组件来完成调用. 如我们需要发起get请求,携带的参数都是附加到请求的ur ...

  4. MyCat 学习笔记 第八篇.数据分片 之 求摸运算分片

    1 应用场景 Mycat 自带了多套数据分片的机制,其实根据数值取摸应该是最简单的一种. 优点:数据离散概率较为平均,可以有效的提高应用的数据吞吐. 缺点:比较明显,后期数据运维与迁移比较困难.好在M ...

  5. 烂泥：centos安装及配置DHCP服务器

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 有关DHCP服务器的配置一直打算学习,这几天终于抽出时间来专门学习这个知识点. DHCP:动态主机配置协议,在此就不多做介绍.不清楚的童鞋,可以去百度下 ...

  6. html的<head><title><meta>

    head <head>用来标记HTML的头部,里面通常需要包括标题,基础信息,源信息等,定义在HTML头部的内容往往不会在网页上直接显示 title <title>的内容设置在 ...

  7. 安装SQL Server2008，要重启机器,解决办法

    安装SQL Server2008时,总提示有挂起,要重启机器:重启之后还是有相应的提示,该怎么办呢? 其实只要删除一个注册表项就可以了: 1.  打开注册表编辑器 开始菜单—>运行->re ...

  8. [译] C track: compiling C programs.

    原文:C track: compiling C programs. C track: compiling C programs. 尽管有些计算机语言(如 Schema 或者 Basic)通常使用交互式 ...

  9. three Sum

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  10. BendFord's law's Chi square test

    http://www.siam.org/students/siuro/vol1issue1/S01009.pdf bendford'law e=log10(1+l/n) o=freq of first ...