<!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. ecshop的弊病和需要修改的地方,持续更新

    ecshop的session机制是基于cookie的,用数据库进行缓存,当浏览器关闭cookie,sessions表会爆表,所以需要改进. 在cls_template.php中 $_echash值是固 ...

  2. win7,win8.1下hosts文件无法修改的快速解决办法

    一,找到C:\Windows\System32\drivers\etc,下hosts文件复制一份到桌面: 二,使用notepad++或其他编辑器修改桌面复制出来的那份HOSTS: 三,将修改后的文件复 ...

  3. 平行四边形TikZ作图

    %!TEX program = pdflatex \documentclass[varwidth=true, border=2pt]{standalone} \usepackage{tikz} \us ...

  4. Asp.net Session 保存到MySql中

    一 网站项目引入"mysql.web.dll" 二 web.config配置中添加mysql数据库连接字符串 <connectionStrings> <remov ...

  5. Eclipse 3.5使用dropins的插件安装方式

    以前安装Eclipse插件有两种方式 1 直接copy插件到features/plugins目录 2 在links目录下创建链接文件. 而 Eclipse 3.5又推出另一种新的安装途径, 更加灵活. ...

  6. WinForm窗体PropertyGrid控件的使用

    使用过 Microsoft Visual Basic 或 Microsoft Visual Studio .NET的朋友,一定使用过属性浏览器来浏览.查看或编辑一个或多个对象的属性..NET 框架 P ...

  7. [转]Caffe 深度学习框架上手教程

    Caffe 深度学习框架上手教程 机器学习Caffe caffe 原文地址:http://suanfazu.com/t/caffe/281   blink 15年1月 6   Caffe448是一个清 ...

  8. Navicat for Oracle 连接oracle 配置

    oci.dll  替换为对应oracle版本的oci.dll

  9. cocos2d-x 之 CCArray 源码分析(2)

    cocos2d-x 自己实现了一个数组CCArray ,下面我们来分析一下CCArray的源码 CCArray继承CCObject,所以,CCArray也具有引用计数功能和内存自动管理功能. 数组的源 ...

  10. 【Java】XML解析之JDOM

    JDOM介绍 JDOM是一个开源项目,它基于树型结构,利用纯JAVA的技术对XML文档实现解析.生成.序列化以及多种操作.使用jdom需要引入jdom.jar包. XML生成及解析 代码如下: pac ...