requirejs整合art-template模板引擎

目录结构

文件目录介绍：
domReady.js /用于暂停上层应用的执行，直到DOM准备好再进行查询/修改（requirejs插件）
i18n.js /使用国际化（requirejs插件）
template-web.js /art-template模板引擎
text.js /可以在加载text字符（requirejs插件）

list.tpl /具体业务模板引擎模板
main.js /启动js
require.js / requirejs
index.html /首页 html

主要代码

1.index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs</title><script src="js/require.js" data-main="js/main"></script>
</head>
<body><div id="content"></div>
</body>
</html>

2.main.js

requirejs.config({baseUrl: 'js/public',paths: {'art-template': '../lib/template-web','text': '../lib/text','list': 'template/list.tpl'}
});requirejs(['text!list','art-template'],function(list,template){var data = {title: '基本例子',isAdmin: true,list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']};var html = template.render(list, data);document.getElementById('content').innerHTML = html;
});

3.list.tpl

{{if isAdmin}}
<h1>{{title}}</h1>
<ul>{{each list value i}}<li>索引 {{i + 1}} ：{{value}}</li>{{/each}}
</ul>
{{/if}}
{{$data}}

结果页面：

注意：如果要单都引用一个模板页面，需要在服务器端运行，否则回报跨域的错误，模板引擎的模板是不是标准的html和script，可以将模板文件的后缀设为tpl，结合require的text插件能将模板文件读取为text文本，再渲染为html。

requirejs整合art-template模板引擎相关推荐

template模板引擎的使用例子
背景:使用模板引擎可以避免复杂的数据操作,例如数据很多时,把数据渲染到表单中是特别麻烦的事情.如果使用模板引擎可以很方便的帮助我们完成这些繁琐的操作. 模板引擎有很多种,但是每种模板引擎的使用方式都是 ...
Spring Boot 使用 Kotlin Script Template 模板引擎kts 开发web应用
Spring Boot 使用 Kotlin Script Template 模板引擎kts 开发web应用在 Spring Framework 5.0 M4 中引入了一个专门的Kotlin支持. K ...
JavaScript中template模板引擎
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
art template 模板渲染数据
客户端 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
springboot 整合 freemarker前端模板引擎实现数据展示
一.freemaker 1.简介 FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它不是面向最终用户 ...
html中模板引擎—前端与后端
模板引擎模板引擎起到数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
java 前端模板_前端模板引擎入门
模板引擎模板引擎起到数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
模板引擎FreeMarker的介绍和使用
模板引擎模板引擎的目标是"数据+模板=结果" 模板引擎将数据与展现有效的"解耦" 前端只需要知道怎么编写前端,后端只需关注后端,用模板引擎把两者整合主流的模 ...
前端模板引擎 artTemplate的使用与进阶
前端模板引擎 artTemplate的使用与进阶查看全文 http://www.taodudu.cc/news/show-3760040.html 相关文章: springboot 整合 free ...

requirejs整合art-template模板引擎

相关官网

目录结构

主要代码

requirejs整合art-template模板引擎相关推荐

最新文章

热门文章