Underscore模版引擎的使用-template方法

之前项目里有遇到在DOM中增加大量的html结构的时候,傻乎乎的在js中写一堆模版,然后用replace一个一个做替换。当时就是难看了点,不觉得啥,现在了解了模版引擎之后回头来看真的比较捉急了,以后是不会那么傻了。

今天就介绍一下个人认为比较好用的一个模版引擎,Underscore中的template方法,我觉得underscore这个库真的不错,有计划边看源码边分析学习,到时候也会总结一些心得吧。

_.template(templateString, [data], [settings])

这是template方法的api,可接受三个参数,其中:

第一个参数也是必须的参数是模版字符串,你可以通过<%=  %> 来插入变量,还可以通过<%  %>来插入js代码,也可以通过<%-  %>来进行html转义,如果变量很多,可以使用<% print() %>来简化。

第二个参数是传入模版的数据,如果不传第二个参数,那么这个方法会返回一个模版函数,这个模版函数可以穿入数据返回完成的模版,如果传入data参数则会直接返回一个已完成的模版。

第三个参数是设置,比如这个方法默认是寻找<%  %>来进行替换,可以通过设置它来改变具体的方法可以参照这里

用法其实很简单

var cmpiled = _.template("hello <%= name %>");
compiled.({name: mike}); // "hello mike"

可以注意到,模版中可以插入js代码,那么对于很长的带有相当重复性的内容,可以做这样的处理

<script type="text/template" id="tpl">
  <% _.each(data, function(n){ %>
    <p>姓名:<%= n.name %>,年龄:<%= n.age %>,性别:<%= n.sex %></p>
  <% }); %>
</script>
var data = [
  {
    name: ‘mike‘,
    age: 18,
    sex: ‘男‘
  },
  {
    name: ‘nina‘,
    age: 20,
    sex: ‘女‘
  },
  {
    name: ‘elle‘,
    age: 26,
    sex: ‘女‘
  }
];
$(‘body‘).append(_.template($(‘#tpl‘).html(), data));

这样在js代码中就可以只作数据处理,而不用出现那一串又臭又长的模版字符串,大大提高了代码可读性,也在某种意义上实现了数据和表现的分离。

时间: 2024-09-28 19:43:45

Underscore模版引擎的使用-template方法的相关文章

javascript模板引擎artTemplate.js——template()方法

template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染函数. 示例一如下: <div id="content"></div> <script src="../js/template.js" type="text/javascript" charset="utf-8

php smarty模版引擎中变量操作符及使用方法

php smarty模版引擎中变量操作符及使用方法

第六章:FLASK模版引擎以及模版方法

一,上节回顾: 1) 什么是蓝图? 2) 为什么用蓝图? 3) 怎么实例化一个蓝图? 4) 怎么将蓝图注册到flask的核心对象上? 二,什么是模版引擎? 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档.(摘自 百度百科) 三,模版引擎都有什么?flask用的是什么模版引擎? 模版引擎有很多种,像 PHP(smarty)  Python(Janjia,marco)  Java(

前端数据模版引擎的总结

模板的工作原理可以简单地分成两个步骤:模板解析(翻译)和数据渲染.这两个步骤可分别部署在前端或后端来执行.如果放在后端执行,则是像Smarty,FreeMarker这样的后端模板引擎,而如果放在前端来执行,则是我们要探讨的前端模板. FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写,模板用servlet提供的数据动态地生成 HTML,模板语言是强大的直观的,编译器速度快,输出接近静态HTML页面的速度.这里不再对后端模版进行描述. 前端模版提高了前端开发

【转】T4模版引擎之基础入门

额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又在背后默默无闻的奉献着,直到现在我们项目组的人除了我之外,其它人还是对其豪无兴趣,基本上是连看一眼都懒得看,可怜的娃啊... T4(Text Template Transformation Toolkit)是微软官方在VisualStudio 2008中开始使用的代码生成引擎.在 Visual Studio 中,“T4 文本模板”是由一些文本块和控制逻辑组成的混合模板,它可以生成文本文件. 在 Visual C# 或 Visual

Java模版引擎velocity的使用

前言 关于velocity与SpringMVC的配置请参考前一篇文章,此处不再介绍.velocity作为Java模版引擎的主要目的是为了允许任何人使用简单而强大的模板语言来引用定义在Java代码中的对象.在velocity文件中可以给该页面指定模版布局,从而节省了大量的时间去写通用的模版布局.可以定义变量,与Java方法进行交互. 定义一个layout模版 在上一篇文章中提到了配置默认模版,当然也可以不使用默认模版即在要用到的页面的最上端写上 #set($layout='layout/yourl

使用模版引擎填充重复dom元素

引入arttemplate,定义newajax发送跨域请求获得数据,将获得的数据用定义的格式渲染 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.js"></script> <scrip

js模版引擎开发实战以及对eval函数的改进

简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根据固定规则,解析为可执行语句字符串: 2. 执行可执行解析后的语句字符串,即生成我们想要的页面结构. 具体实现方法: 1. 最终效果 1 /* 解析前 2 <ul> 3 {{for(var i = 0; i < data.todos.length; ++i)}} 4 {{if(data.to

PHP模版引擎 – Twig

在网站开发过程中模版引擎是必不可少的,PHP中用的最多的当属Smarty了.目前公司系统也是用的Smarty,如果要新增一个页面只需把网站的头.尾和左侧公共部分通过Smarty的include方式引入进来,然后主体部分写内容即可,用起来也是相当方便.这也是一种比较通用的做法.但维护一段时间后发现有些凌乱了: 1. 公共部分内容越加越多了,不需要用的js.css在一些页面也被强制引进来了 2.新页面的css只能写在网页的body内,看起来总让人不爽. 3.左侧.头部.尾部若有特殊显示,操作起来不方