先上一个demo,简单粗暴,请自便

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body> <script type="text/template" id="unit_temple">
这里是模版
<div>你好</div>
</script>
<div id="content">hi</div> <script type="text/javascript">
$("#content").html($("#unit_temple").html());
</script>
</body>
</html>

这里定义了一个渲染的模板,在最初看html <script>标签的type属性的时候只看到了如下几个值,固定思维的以为就只能用下面的几个值了,其实type这个值是可以更改的,就如上面的那个demo了,

<script type="text/template" id="unit_temple">
语法
<script type="value">
属性值
值 描述
MIME_type
MIME 类型。其中一些值:
text/javascript
text/ecmascript
application/ecmascript
application/javascript
text/vbscript

这里为什么用script标签呢,用script标签的好处是默认不会显示在页面上,而且可以放置除script标签以外所有的标签,模板一般不会出现scrtipt标签,总结一下就是script 标签的type可以随意定义, 但是要看支持的东西,比如React用的 jsx 就用的是 text/jsx。

关于MVC模板渲染的一点小事type="text/template"的更多相关文章

  1. 前端模板<script type="text/template" id="tmpl">

    前端模板, 比连接字符串好用多了, 还可以使用循环\判断等语句, 减少工作量 <script type="text/template" id="member-tmp ...

  2. <script type="text/template">是干什么的,为什么要把html写在js中? 这是什么编程语言风格,都能这样用吗?

    这一段存放了一个模板.在js里面,经常需要使用js往页面中插入html内容.比如这样: var number = 123; $('#d').append('<div class="t& ...

  3. 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件

    https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...

  4. Js script type="text/template"的使用简单说明

    <script type="text/template" id="treeTableTpl"> <tr id="{{row.id}} ...

  5. JavaScript type="text/template"的用法

    JavaScript type="text/template"相当于定义一个模板,如果没有使用html()方法的话,是显示不出来的,我们直接看例子(我是在tp框架的里面写的) &l ...

  6. mustache模板渲染的基本原理

    mustache.js是一个模板引擎,为开发节省了大量的“人力”,对于初学者,我是从这篇 和这篇 博客接触的,算是对mustache有了初步认识,不得不承认自己还是菜鸟阶段还有太多东西要学,慢慢熟悉. ...

  7. <script type="text/x-template"> 模板

    获取动态的js模板可以用art-template插件 <script type="text/template"> 给<script>设置type=" ...

  8. JS数据模板分离(告别字符串拼接)-template

    刚开始在写第一个动态网页的demo时,由于html不多,便使用字符串拼接的方法添加到dom来渲染,可是在后来写某外卖app时也需要如此添加,打开代码一看几千行,突然感觉累觉不爱 一行行的拼接有这功夫别 ...

  9. JS的type类型为 text/template

    JS标签中有时候会看见<script type="text/tmplate" >,大概就是一个放置模板的地方,而这些东西并不显示在页面 在js里面,经常需要使用js往页 ...

随机推荐

  1. Foreach嵌套Foreach速度慢优化方案

    有时候这样的效率还可以,但是只要牵涉到操作数据库,那就GAMEOVER.. 最近在维护项目,一个Foreach循环,4分半才能出来结果. 代码: foreach ($content as $key = ...

  2. 使用FDTemplateLayout框架打造个性App

    效果展示 project下载地址 · 进入构建结构 首先我们新建一个project 接下来我们拖进来一个Table View Controller,将Storyboard Entry Point指向我 ...

  3. iphone手机分辨率--持久维护

    6.5英寸 —— 1242 x 2688 px —— Xs Max 6.1英寸 —— 828 x 1792 px —— XR 5.8英寸 —— 1125 x 2436 px —— X/Xs 5.5英寸 ...

  4. 开发ActiveX控件调用另一个ActiveX系列3——ActiveX调用另一个ActiveX

    终于进入正题了,怎样在ActiveX中调用另一个ActiveX.我们的项目需要调用华视电子身份证识别仪的ActiveX控件 在这里有很多识别仪ActiveX插件下载:http://www.idukaq ...

  5. linux下安装redis报错问题。

    1.使用tar -xzvf redis-2.4.5.tar.gz来解压安装包 2.使用make命令来编译Redis 如果出现错误需要查看是否缺少gcc gcc-c++ zmalloc.h:50:31: ...

  6. rtems 4.11 工具链

    4年前,曾经把rtems4.10移植到atmel 9263上,要不是当时移植的git仓库还在的话,真是不相信自己居然还干过这事.所以这次再捡起的时候,要记录一下.还是从编译器开始. 首先打开 http ...

  7. Centos内核版本升级

  8. golang手动管理内存

    作者:John Graham-Cumming.   原文点击此处.翻译:Lubia Yang(已失效) 前些天我介绍了我们对Lua的使用,implement our new Web Applicati ...

  9. linux 更新yum源 改成163源

    安装完CentOS6.3后,为避免从国外站点安装更新速度过慢,需要更改yum更新源,所以从网上找了下更改linux yum源的方法,和大家进行下分享.原理很简单,就是把yum配置文件中的更新源改一下, ...

  10. 如何创建虚拟硬盘 + os 读取硬盘参数代码

    [0]README 0.1) 本文旨在演示如何利用 bximage 创建虚拟硬盘: 0.2) 利用 os 读取硬盘参数, source code from orange's implemention ...