<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <script language="javascript" type="text/javascript" src="jquery-1.11.1.min.js"></script>

    <script language="javascript" type="text/javascript">

        //框架代码

        $(function () {

            $("[up-ctl]").each(function (i, item) {

                var parent = $(this);

                var ctl = parent.attr("up-ctl");

                var tar = window[ctl]();//执行用户的ctl方法

                //parent.data("_data", tar);//以后可能会用到

                var str = parent.html().replace(/##(.+?)##/g, function (e1, e2) {

                    var res = tar[e2];

                    if (res == undefined || res == null) {

                        return e1;

                    } else {

                        return res;

                    }

                });

                parent.html(str);

                parent.find("[up-repeat]").each(function (i, item) {

                    var repeat = $(this);

                    var itemAttr = repeat.attr("up-repeat");

                    for (var i = 0; i < tar[itemAttr].length; i++) {

                        var repeatStr = repeat.html().replace(/{{(.+?)}}/g, function (e1, e2) {

                            var res = tar[itemAttr][i][e2];

                            if (res == undefined || res == null) {

                                return e1;

                            } else {

                                return res;

                            }

                        });

                        repeat.after(repeatStr);

                    }

                    repeat.remove();

                });

            })

        });

    </script>

    <script>

        //用户代码

        function ctl1() {

            var obj = {};

            obj.title = "这是一个对象";

            obj.items = [];

            for (var i = 0; i < 20; i++) {

                var item = {};

                item.title = "第" + i + "个";

                item.index = i;

                obj.items.push(item);

            }

            return obj;

        }

    </script>

</head>

<body>

    <div up-ctl="ctl1">

        <h1>##title##</h1>

        <ul>

            <li up-repeat="items">

                {{index}}：{{title}}<br />

            </li>

        </ul>

    </div>

</body>

</html>

　　

模仿angularjs写了一个简单的HTML模版和js数据填充的示例的更多相关文章

  1. 用angularjs写的一个简单的grid table

    效果图 用到的工具 1.需要先安装nodejs打开直接安装就好了 2.安装完成后使用 淘宝的源 国内速度快 安装方法 npm install -g cnpm --registry=https://re ...

  2. 只是一个用EF写的一个简单的分页方法而已

    只是一个用EF写的一个简单的分页方法而已 慢慢的写吧.比如,第一步,先把所有数据查询出来吧. //第一步. public IQueryable<UserInfo> LoadPagesFor ...

  3. 写了一个简单的CGI Server

    之前看过一些开源程序的源码,也略微知道些Apache的CGI处理程序架构,于是用了一周时间,用C写了一个简单的CGI Server,代码算上头文件,一共1200行左右,难度中等偏上,小伙伴可以仔细看看 ...

  4. 自己写的一个简单PHP采集器

    自己写的一个简单PHP采集器 <?php //**************************************************************** $url = &q ...

  5. 写了一个简单可用的IOC

    根据<架构探险从零开始写javaweb框架>内容写的一个简单的 IOC 学习记录    只说明了主要的类,从上到下执行的流程,需要分清主次,无法每个类都说明,只是把整个主线流程说清楚,避免 ...

  6. 写了一个简单的 Mybatis

    写了一个简单的 Mybatis,取名 SimpleMybatis . 具备增删改查的基本功能,后续还要添加剩下的基本数据类型和Java集合类型的处理. 脑图中有完整的源码和测试的地址 http://n ...

  7. 利用HttpClient写的一个简单页面获取

    之前就听说过利用网络爬虫来获取页面,感觉还挺有意思的,要是能进行一下偏好搜索岂不是可以满足一下窥探欲. 后来从一本书上看到用HttpClient来爬取页面,虽然也有源码,但是也没说用的HttpClie ...

  8. 今天写了一个简单的新浪新闻RSS操作类库

    今天,有位群友问我如何获新浪新闻列表相关问题,我想,用正则表达式网页中取显然既复杂又不一定准确,现在许多大型网站都有RSS集合,所以我就跟他说用RSS应该好办一些. 一年前我写过一个RSS阅读器,不过 ...

  9. cJSON: 一个用c写的一个简单好用的JSON解析器

    转自:http://blog.csdn.net/chenzhongjing/article/details/9188347 下载地址: http://sourceforge.net/projects/ ...

随机推荐

  1. javascript高级程序设计--笔记01

    概述 JavaScript的实现包含三个部分: 1  核心(ECMAScript)   提供核心语言功能 2  文档对象模型(DOM)  一套提供了访问以及操作网页内容的API 3  浏览器对象模型( ...

  2. bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)

    html部分: <ul class="pagination"></ul> <!--bootstrap3版本用ul包裹--> <div cl ...

  3. MS SQL Server之光标、存储过程和触发器

    光标 通常数据库操作被认为是以数据集为基础的操作,但是光标被用于以记录为单位来进行操作,来获取数据库中的数据的子集.光标一般用于过程化程序里的嵌入的SQL语句. 对光标的定义如下: DECLARE C ...

  4. spring junit

    转载自 http://blog.csdn.net/funi16/article/details/8691575 在写单元测试的时候,一般是对数据库进行增删改查的操作,这个时候,如果之前删除了某条记录, ...

  5. Warchall: Live RCE

    具体漏洞是:CVE-2012-1823(PHP-CGI RCE) 在地址后面加进参数运行对应的php-cgi 参数的行为 例如 index.php?-s 相参于/usr/bin/php53-cgi/p ...

  6. C#数据库操作

    1.常用的T-Sql语句      查询:SELECT * FROM tb_test WHERE ID='1' AND name='xia'                SELECT * FROM ...

  7. Activity生命周期（一） 暨 帮助文档的使用

    --------siwuxie95 首先创建一个ActivityLifeCircle 选择API:21   Android 5.0  (截止目前:2016/12/21,承上启下,兼容更好) 选择空活动 ...

  8. Python全栈--6.1-match-search-findall-group(s)的区别以及计算器实例

    match.search.findall.group(s) 区别 import re # match findall经常用 # re.match() #从开头匹配,没有匹配到对象就返回NONE # r ...

  9. redis学习（二） Redis Hash

    Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). redis ...

  10. 链接，光标，DHTML，缩放

    18.1css中链接的使用超链接伪类属性:a:link 表示该链接文字尚未被点选a:visited 表示该链接文字已被点选过a:active 表示该链接文字正被点选,但未被放开a:hover 表示当鼠 ...