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. android适配器及监听点击和滚动在ListView中的使用

    package com.example.demon08; import java.util.ArrayList;import java.util.HashMap;import java.util.Li ...

  2. php 利用activeMq+stomp实现消息队列

    php 利用activeMq+stomp实现消息队列 一.activeMq概述 ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J ...

  3. 从Wep page到Application

    需要做一个选择,是Web app还是Native app,当然,还有第三种,Hybrid app. 现在手机用户越来越多,电脑终端浏览器也在不断的更新换代,推陈出新,网页已经不仅仅是用来分享信息这么简 ...

  4. [编]IoT The Internet of Things (IoT) 物联网

    物联网是新一代信息技术的重要组成部分.其英文名称是“The Internet of things”.由此,顾名思义,“物联网就是物物相连的互联网”.这有两层意思:第一,物联网的核心和基础仍然是互联网, ...

  5. [转]Ionic – Mobile UI Framework for PhoneGap/Cordova Developers

    本文转自:http://devgirl.org/2014/01/20/ionic-mobile-ui-framework-for-phonegapcordova-developers/ Ionic i ...

  6. 使用DateLocaleConverter和SimpleDateFormat实现字符串转换成日期

    使用DateLocaleConverter: public static void change() { String birthday = "1990-12-32"; DateL ...

  7. dipole antenna simulation by FEKO

    新建变量 建立模型 设置频率 馈电设置为wire port ,Edge 选中振子,从中心馈电. 设置输入信号 Mesh. run solver.在post feko中查看相关结果

  8. iOS开发之——制作framework静态库教程

    环境: 硬件:macbook air 系统:OSX EI Capitan 版本:10.11.3 xcode : Version 7.2.1 (7C1002) 最近在做ios的静态库(据说framewo ...

  9. $.ajax()方法详解及实例

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  10. UESTC 887 方伯伯的儿童节 --树形DP

    定义: 1.dp[u][1]表示u这个点设立糖果发放点且u这棵子树满足条件时的最少糖果点数 2.dp[u][0]表示u这个点不设立发放点且u这棵子树满足条件时的最少糖果点数 设v1,v2……vn为u的 ...