<!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. 《Linux内核设计与实现》读书笔记 第一章 Linux内核简介

    一.相关历史 1. Unix内核的特点 简洁:仅提供系统调用并有一个非常明确的设计目的 抽象:几乎所有东西都被当做文件 可移植性:使用C语言编写,使得其在各种硬件体系架构面前都具备令人惊异的移植能力 ...

  2. ios 学习总结之动画（转）

    转自:http://blog.sina.com.cn/s/blog_a85effc301012wu4.html UIView的,翻转.旋转,偏移,翻页,缩放,取反的动画效果   翻转的动画 //开始动 ...

  3. J. Bottles 二维费用背包问题

    http://codeforces.com/contest/730/problem/J 3 4    36    1 90   45   40 其实可以知道,选出多少个瓶子呢?是确定的,当然选一些大的 ...

  4. notepad++对systemverilog的支持

    找到notepad++根目录中的"langs.xml",用notepad++打开,并搜索"verilog",     找到后,修改后面那句话为ext=" ...

  5. Python全栈---5.1---装饰器

    一.装饰器 执行outer函数,将index作为参数传递, 将outer函数的返回值,重新赋值给index 装饰器可以在函数执行前和执行后执行其他的附加功能,这种在代码运行期间动态增加功能的方式,称之 ...

  6. 第六周PSP

    [week6]psp  工作周期:10.20-10.27  本周PSP     C类型 C内容 S开始时间 ST结束时间 I中断时间 T净时间(分) 活动 开事后诸葛亮会议 13:00 14:00 0 ...

  7. u3d shader forge 冰渐冻材质

    <ignore_js_op> 分享个自己研究的冰材质渐冻shader可以调节的参数很多,并且带模型顶点偏移,能更加真实模拟冰的凹凸厚度感.(参数过大容易出现模型破损,慎用)shader f ...

  8. 设置阿里云maven中央仓库的settings.xml

    本来想找一个可用的设置文件,结果乱七八糟的,干脆自己做了一个,同时还放上了Spring的SNAPSHOT和MILESTONE/RELEASE仓库,希望能帮到一些人. <?xml version= ...

  9. C++进阶 面向对象基础(三)

    类的的定义: 初始化一般建议使用构造函数初始化列表形式: Person(const string nm, const string addr):name(nm), address(addr){} th ...

  10. Java签名

    有的时候会忘记签名,想想还是在博客里面记录下,,省的我忘了还要去翻文档,哈哈: 除了boolean, long,类型其他的基本类型都是首字母大写: Java类型 类型描述符 boolean  Z ch ...