templatejs使用总结

shaonbean 发布于2019-08-21 17:45 / 3015人阅读

摘要：单标签，配合标签使用。使用这种方式，需要使用模板变量表示索引，表示索引值。标签为双标签，使用时必须使用标签结束，使用方法为条件表达式，和普通基本相同。在逻辑判断时配合使用，所有的标签必须包含在内。

概述

template.js是一个基于 jquery 的前端 javascript 模板，插件主要解决数据渲染时的繁琐的数据处理。模板解决了html片段连接效率低下和繁琐的问题。看了很多相关的博客，博客内容几乎一样，很多知识点并没有详细的说明，对此经过两天的实验研究，把研究的结果记录下来。

模板标签

1.{{each}}:双标签，用于遍历对象，数组或者 json 对象。
2.{{if}}:双标签，用于数据类型的判断，条件可以是表达式。
3.{{else}}:单标签，配合 {{if}} 标签使用。
4.{{html}}:单标签，用于解析含有 html 片段的字符串。
5.{{tmpl}}:单标签，用于模板的嵌套。
6.{{wrap}}:双标签，包装器，(没有发现使用的奥秘，欢迎指点)

模板的常用变量和方法

  有用的常量：
  (1) ${var}:输出变量
  (2) {{= var}}:输出变量,注意等号后面必须紧跟空格
  
  (3) $item:表示当前模板
  (4) $data:表示数据源，即模板注入的数据
  
  (5) $index:表示在使用 each 时的索引
  (6) $value:表示在使用 each 时的键值
  
  方法：
  (1) $.tamplate(name,str):将指定的html代码段转化成指定名称的模板,name模板名称,str代码片段,
      并将数据缓存。     
  (2) $.tmpl(name,data):核心方法，将数据注入模板,并解析模板,name模板名称,data：数据源
  (3) $.tmplItem(ele):获取使用模板渲染的指定元素上的数据,ele表示DOM节点
  
  (4) $(ele).tmpl(data):局部方法,获取模板,向模板中注入数据,并解析模板
  (5) $(ele).tmplItem():获取使用模板渲染的指定元素上的数据,ele表示DOM节点
  (6) $(ele).template(name):将数据缓存在ele节点，缓存的key为name
  看源码发现局部方法最终调用的是全局的方法，所以在全局的方法是template.js的核心，局部方法只是辅助
功能，为用户提供更灵活的方式获取模板，为模板注入数据，解析模板。

标签的使用

{{each}}
标签为双标签，使用时必须使用{{/each}}标签结束，在使用时需要注意一下几点：

   (1) 在数据源为数组时，并不需要使用这个标签，模板会自动遍历数组。
   (2) 
       使用方式一：
           {{each array|jsonObject}}，将数组或json对象放在标签名称的后面，
         实现的遍历方式，与 jquery 中的全局方法 $.each() 相同。源码中也是通过 $.each() 实现的。
         使用这种方式，需要使用模板变量 $index 表示索引，$value 表示索引值。
         
       使用方式二：
           {{each(key,value) array|jsonObject}},使用此方式与方式一基本相同，唯一不同的是，
         此时指定了遍历时的 key 和 value取代了模板变量 $index 和 $value，
         同时不能使用 $index和 $value。
   (3) 需要注意的是，数据源的问题，若果使用的不是数组，而是复杂的数据类型，可以使用模板嵌套的方式，
       解析数据类型为数组的键值，这样就避免了多次使用each标签。

{{if}}
标签为双标签，使用时必须使用{{/if}}标签结束，使用方法：

   (1) {{if condition}} : condition 为条件表达式，和普通if基本相同。
   (2) 在逻辑判断时配合{{else}}使用，所有的{{else}}标签必须包含在{{if}}{{/if}}内。

GPU云服务器云服务器使用方法总结 templatejs 年终总结网络总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89961.html

templatejs使用总结

摘要：单标签，配合标签使用。使用这种方式，需要使用模板变量表示索引，表示索引值。标签为双标签，使用时必须使用标签结束，使用方法为条件表达式，和普通基本相同。在逻辑判断时配合使用，所有的标签必须包含在内。概述 template.js是一个基于 jquery 的前端 javascript 模板，插件主要解决数据渲染时的繁琐的数据处理。模板解决了html片段连接效率低下和繁琐的问题。看了很...

luck 2019-08-01 18:04 评论0 收藏0
浅谈模板引擎之artTemplate

摘要：来给大家推荐一款模板引擎，会推荐这款模板引擎最主要还是他轻量级，代码简洁，好用，一个大概也才几左右。对于前端开发者来说，有一个绑数据的模板是多么的幸福，不用我多说大家也知道，终于不用在js中一个个字符串拼接一大推元素数据啥的，可以省下我们很多时间。来给大家推荐一款模板引擎artTemplate，会推荐这款模板引擎最主要还是他轻量级，代码简洁，好用，一个template.js大概也才几...

zeyu 2019-08-01 17:19 评论0 收藏0
浅谈模板引擎之artTemplate

摘要：来给大家推荐一款模板引擎，会推荐这款模板引擎最主要还是他轻量级，代码简洁，好用，一个大概也才几左右。对于前端开发者来说，有一个绑数据的模板是多么的幸福，不用我多说大家也知道，终于不用在js中一个个字符串拼接一大推元素数据啥的，可以省下我们很多时间。来给大家推荐一款模板引擎artTemplate，会推荐这款模板引擎最主要还是他轻量级，代码简洁，好用，一个template.js大概也才几...

caohaoyu 2019-08-20 18:28 评论0 收藏0
基于TmodJS的前端模板工程化解决方案

摘要：原作者唐斌腾讯什么原名是一个简单易用的前端模板预编译工具。本文作者为来自腾讯团队的唐斌，他在本文中为我们分析了传统前端模板内嵌的弊端，如开发调试效率低下自动化构建复杂度比较高等特点，并针对目前现状给出了较好的解决方案。原作者: 唐斌（腾讯）| TmodJS什么 TmodJS（原名atc）是一个简单易用的前端模板预编译工具。它通过预编译技术让前端模板突破浏览器限制，实现后端模板一样的同...

zhaochunqi 2019-08-20 13:35 评论0 收藏0
Java学习路线总结，搬砖工逆袭Java架构师（全网最强）

摘要：哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码，加入群聊，一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话，现在公司的现状是码农太多，但能独立带队的人太少，简而言之，不缺干 ? 哪吒社区Java技能树打卡【打卡贴 day2...

Scorpion 2021-11-18 10:02 评论0 收藏0