<!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. arpg网页游戏之地图（一）

    [转]http://www.cnblogs.com/BlueWoods/p/4681572.html?from=timeline&isappinstalled=1 开发arpg网页游戏一项比较 ...

  2. eclipse 使用

  3. AngularJS 中设置 AJAX get 请求不缓存的方法

    var app = angular.module('manager', ['ngRoute']); app.config(['$routeProvider', function($routeProvi ...

  4. iOS使用Safari调试UIWebView

    1.设置Safari "Safari"->"偏好设置"->"高级",勾选"在菜单栏中显示开发菜单" 2.设置 ...

  5. 基于bootstrap分页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Jquery Mobile 动态添加元素然后刷新 转

    Jquery Mobile 动态添加元素然后刷新 (2013-05-09 12:39:05) 转载▼ 标签: it 分类: Mobile jquery 表单元素每一个元素都有自己刷新的方法,每当改变它 ...

  7. MySQL里的wait_timeout

    如果你没有修改过MySQL的配置,缺省情况下,wait_timeout的初始值是28800. wait_timeout过大有弊端,其体现就是MySQL里大量的SLEEP进程无法及时释放,拖累系统性能, ...

  8. Open Live Writer的配置

    --------siwuxie095 1.首先到官网下载OLW:http://openlivewriter.org/ 2.选择 Other services 3.填写"博客地址". ...

  9. xll调试方法

    1)打开编译好的debug下的xll 2)project property->Configuration Properties Debugging set Attach as "Yes ...

  10. php 解析 视频 信息 封面 标题 图片 支持 优酷, 土豆 酷6 56 新浪 qq播客 乐视 乐视

    原文地址:http://www.lianyue.org/2013/2497/ <?php /** * 解析 视频信息 类 * * 支持 优酷, 土豆 酷6 56 新浪 qq播客 乐视 乐视 ** ...