专栏首页liulun模仿angularjs写了一个简单的HTML模版和js数据填充的示例

模仿angularjs写了一个简单的HTML模版和js数据填充的示例

<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 30分钟泛型教程

    一、泛型入门: 我们先来看一个最为常见的泛型类型List<T>的定义 (真正的定义比这个要复杂的多,我这里删掉了很多东西) [Serializable] pub...

    liulun
  • ASP.NET CORE Linux发布工具(文件对比 只上传差异文件;自动启停WebServer命令;上传完成自动预热WebServer)

    liulun
  • CSS旋转动画和动画的拼接

    linear是匀速运动,还可以设置为: ease 默认。动画以低速开始,然后加快,在结束前变慢。 ease-in 动画以低速开始。 测...

    liulun
  • 张海港演讲PPT:工业互联网精准安全防御的实践

    2月22日上午,在2019工业互联网峰会“工业互联网安全体系建设”分论坛上,海尔集团首席安全官张海港,以《工业互联网精准安全防御的实践》为题作演讲。

    安智客
  • [TCP/IP] 网络层-ARP协议

    MAC地址:物理地址,网卡厂家要确保MAC地址全球唯一,48位2进制,显示是12位16进制

    陶士涵
  • 一个十分简短的Tween

    说它短,是因为总共核心代码+注释不到100行。(需要声明一下的是此代码非原创,但略有修改,加了自已的部分注解)

    meteoric
  • Spark的Ml pipeline

    ML pipeline提供了一组统一的高级API,它们构建在 DataFrame之上,可帮助用户创建和调整实用的机器学习pipeline。 一 重要概念 1.1...

    Spark学习技巧
  • 文件上传---动作条

      利用Apache commons fileupload上传文件,直接显示其完成的进度条。----示例代码源自《JAVA WEB王者归来》   1 首先要显示...

    用户1154259
  • spark2的SparkSession思考与总结2:SparkSession有哪些函数及作用是什么

    问题导读 1.spark SparkSession包含哪些函数? 2.创建DataFrame有哪些函数? 3.创建DataSet有哪些函数? 上一篇spa...

    用户1410343
  • Spring Boot 整合 JPA

    目标:Spring Boot 整合 JPA 工具:IDEA--2020.1 学习目标:框架工具集成 本次学习的工程下载链接放到文本最后面

    背雷管的小青年

扫码关注云+社区

领取腾讯云代金券