先上一个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. C#获取webbrowser完整cookie

    [DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = true)] //API设定Cookie stat ...

  2. Android微信分享功能实例+demo

    Android微信分享功能实例 1 微信开放平台注册 2 获得appId,添加到程序中,并运行程序 3 使用应用签名apk生成签名,添加到微信开放平台应用签名,完成注册 4 测试分享功能. 有问题请留 ...

  3. 集团管控的历史读本——Leo鉴书76

    当下中国管理咨询界比較火的课题之中的一个就是"集团管控".公司大了之后怎样正好的用人.怎样对下属分公司不失控制.怎样在二代接手之后系统仍然稳固.种种问题都在困扰着企业们.假设我们把 ...

  4. ngui 输入事件处理

    NGUI不仅提供了图形接口,还提供了输入事件接口!事件接口是通过UICamera来实现的. Unity3d 为我们提供的原装的input尽管非常方便,但真正跨平台使用时(尤其是跨手机与Pc机时)仍然不 ...

  5. c#中Monitor的使用

    首先lock和Minitor有什么区别呢? 其实lock在IL代码中会被翻译成Monitor.也就是Monitor.Enter(obj)和Monitor.Exit(obj). lock(obj) { ...

  6. 看完这篇再不会 View 的动画框架，我跪搓衣板

    引言 众所周知,一款没有动画的 app,就像没有灵魂的肉体,给用户的体验性很差.现在的 android 在动画效果方面早已空前的发展,1.View 动画框架 2.属性动画框架 3.Drawable 动 ...

  7. 基于Python的安卓图形锁破解程序

    安卓手机的图形锁是3x3的点阵,按次序连接数个点从而达到锁定/解锁的功能.最少需要连接4个点,最多能连接9个点.网上也有暴力删除手机图形锁的方法,即直接干掉图形锁功能.但假如你想进入别人的手机,但又不 ...

  8. 这样好用的ReactiveCocoa，根本停不下来【转载】

    前戏我个人非常推崇ReactiveCocoa,它就像中国的太极,太极生两仪,两仪生四象,四象生八卦,八卦生万物.ReactiveCocoa是一个高度抽象的编程框架,它真的很抽象,初看你不知道它是要干嘛 ...

  9. jquery判断复选框是否被选中

    $("#isUse").click(function(){ if($(this).is(':checked')){ $(this).attr('checked','checked' ...

  10. Linux下Kafka单机安装配置方法

    Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: •Kafka将消息以topi ...