如何实现artTemplate模板的可重用性,以此框架打造自己的自定义组件
问题的提出:
我们为什么非得要引入artTemplate来进行JSON数据的渲染呢?
好了,我引入它还不行吗?
我们在项目中引入了artTemplate来解决服务器端返回json数据,由前端JS负责进行页面渲染的问题。
但由此引发了新的问题,就是artTemplate的模板如何实现重用?如果解决不了的话,那么就是一个HTML页写一次模板,不可能实现改一个地方,所以相关的东西都能修改的要求。
比如:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../dist/template.js"></script>
</head> <body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引 {{i + }} :{{value}}</li>
{{/each}}
</ul>
</script> <script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
如何将一个HTML页面嵌套在另一个页面中
http://www.cnblogs.com/saptechnique/archive/2012/08/28/2660403.html
噢,原来shtml是这样的东东啊,那我们使用的是Nginx,这个东西一定是支持shtml的吧?
Nginx SSI 设置
http://iqbon.iteye.com/blog/1882319
http://blog.csdn.net/qmhball/article/details/8778201
Tomcat中的SSI配置是这样的:
http://www.cnblogs.com/qzsonline/archive/2012/01/06/2314035.html
http://blog.csdn.net/silentbalanceyh/article/details/3444239
如何实现artTemplate模板的可重用性,以此框架打造自己的自定义组件的更多相关文章
- directorjs和requirejs和artTemplate模板引擒建立的SPA框架
分为4块:A : index.html壳子. 加载B init-config.js, 加载D header.html模板B : init-config.js 个人信息+路由配置+权限+渲 ...
- artTemplate模板引擎学习实战
在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...
- artTemplate模板引擎
artTemplate模板引擎 <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> </ ...
- Java使用泛型类来提高方法的可重用性
我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3832268.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...
- Class撑起了OOP世界的天。Class类是OO的基本单元,OO的世界都是通过一个一个的类协作完成的,提高软件的重用性、灵活性和扩展性(转)
引言 在OO的工作中,我们一定会涉及到类,抽象类和接口.那么类和抽象类以及接口到底扮演的什么角色? 本文主要是从人类社会的角度阐述类与抽象类以及接口的“社会”关系,从而让我们抛弃书上的那些死记硬背的概 ...
- 高性能前端 art-template 模板
官网: https://aui.github.io/art-template/zh-cn/index.html nodejs 服务器端使用 第一步: 引入 art-template 的包 npm in ...
- django的小操作,查询效率up, 引用art-template模板+djangorestframework
Part1: 提高查询效率newses = News.objects.select_related('category', 'author').get(id=1) # category和author字 ...
- CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭
一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .f ...
- thinkjs——art-template模板用法
前言: 概述之前先附上此正式版介绍地址:https://github.com/aui/artTemplate or http://www.jq22.com/jquery-info1097,可以再看下 ...
随机推荐
- 爬虫实例——爬取淘女郎相册(通过selenium、PhantomJS、BeautifulSoup爬取)
环境 操作系统:CentOS 6.7 32-bit Python版本:2.6.6 第三方插件 selenium PhantomJS BeautifulSoup 代码 # -*- coding: utf ...
- SELECT LAST_INSERT_ID() 的使用和注意事项
SELECT LAST_INSERT_ID() 的使用和注意事项 尊重个人劳动成果,转载请注明出处: http://blog.csdn.net/czd3355/article/details/7130 ...
- [HNOI2010] 弹飞绵羊 (分块)
[HNOI2010] 弹飞绵羊 题目描述 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上 ...
- BZOJ2434: [NOI2011]阿狸的打字机(AC自动机+dfs序+树状数组)
[NOI2011]阿狸的打字机 题目链接:https://www.luogu.org/problemnew/show/P2414 题目背景 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机. ...
- Codeforces Round #493 (Div. 2)D. Roman Digits 第一道打表找规律题目
D. Roman Digits time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- ACM3790迪杰斯特拉算法运用
最短路径问题 Problem Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线,则输出花费最少的 ...
- HBase客户端访问超时的多个因素及参数
在一个需要低延时响应的hbase集群中,使用hbase默认的客户端超时配置简直就是灾难. 但是我们可以考虑在客户端上加上如下几个参数,去改变这种状况: 1. hbase.rpc.timeout: RP ...
- java入门实现转换
设计思想 首先不用多说就是建立最基础的java创建,然后抛出一个异常处理来替我们检测用户的输入,这一点十分重要.然后就要进行输入工作,不必多说,网上的教程有一个Scanner的输入方法,我们引入一下. ...
- UVA 1645 Count
https://vjudge.net/problem/UVA-1645 题意:有多少个n个节点的有根树,每个深度中所有节点的子节点数相同 dp[i] 节点数为i时的答案 除去根节点还有i-1个点,如果 ...
- Linux目录结构nginx
alias 别名( 永久 ) 1.vim /root/.bashrc 2. alias vimens33='vim /etc/sysconfig/network-scripts/ifcfg-ens33 ...