<!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. java基础知识点复习

    第一天: JRE.JDK是什么? Jre java运行环境.Jre = java虚拟机+核心类库(辅助java运行的文件) Jdk:java开发工具集jdk = jre+java的开发工具 2. 配置 ...

  2. ASP.NET Web API系列教程目录

    ASP.NET Web API系列教程目录 Introduction:What's This New Web API?引子:新的Web API是什么? Chapter 1: Getting Start ...

  3. JsonCpp简单使用

    作者:ilife JsonCpp简单使用 1.相关概念总结 (1)解析json的方法 Json::Value json;     //表示一个json格式的对象 Json::Reader reader ...

  4. linux上的编译安装

    计算机运行的程序都是二进制的代码,那么我们所用的编程语言都是自然语言中的字符,那么就需要有一种机制来将这些转化成二进制代码,那么根据转化机制不一样,编程语言(软件 产生的源头)分两大类 解释型 编译型 ...

  5. nullcon HackIM2016 -- Programming Question 3

    Still Hungry and unsutisfied, you are looking for more. Some more, unique un heard dishes. Then you ...

  6. AESwithJCE http://www.coderanch.com/how-to/content/AES_v1.html

    Using AES with Java Technology By Rags SrinivasJune 2003 In September 2000, the National Institute o ...

  7. GridView中 LinkButton两种方式

    <asp:TemplateField HeaderText="操作" ShowHeader="False"> <ItemTemplate> ...

  8. mysql 循环插入日期递增

    create procedure wk() begin declare i int; ; do insert into t (myday) values (date_sub(curdate(),int ...

  9. workerman 的属性

    <?php /** * Created by PhpStorm. * User: zeopean * Date: 2016-08-26 * Time: 16:35 */ use Workerma ...

  10. Centos添加新硬盘、分区、格式化、自动挂载

    创建分区 #fdisk /dev/hdb 格式化新创建的分区 #mkfs.ext3 /dev/hdb1 使新创建的分区挂载/mnt/data01目录下 #mount /dev/hdb1 /mnt/da ...