`

jquery tmpl模板

 
阅读更多

jquery.tmpl模板是用模版生成html的框架其中的一种。

首先需要下载tmpl文本,引入到你的html文件中,在html文件中写代码

举例:

 

<!DOCTYPE html>
<html>
<body>
<head>
<script type="text/javascript" src="../javascript/item_list.js" ></script>
    <script type="text/javascript" src="../javascript/jquery.tmpl.min.js" ></script>
    <script id="form" type="text/x-jquery.tmpl">
         <tr>
                <td>${classification}</td>
                <td>${name}</td>
                <td>${price}</td>
                <td>${unit}</td>
         </tr>
    </script>
</head>

 

${}:花括号里面放的是变量,也可以放表达式。等价于{{= }}需要注意的是等号后面有空格的。

那当我需要渲染的时候该怎么办呢?

代码:$(#form).tmpl(  )

$(#form):是选取要进行渲染的标签,tmpl( )将传入的json对象绑定到模板上。

当我把对象绑定到模板上然后在哪展示呢

 <div>
        <table id="product_list">
            <thead>
            <tr>
                <th>分类</th>
                <th>名称</th>
                <th>单价(元)</th>
                <th>单位</th>
                <th></th>
            </tr>
            </thead>
        </table>
    </div>

 所以我写了个表头

appendTo()被选元素的结尾插入指定元素。

$(#form).tmpl(  ).appendTo(#product_list):将json文件绑定模板,需要渲染东西标签添加到标签id为product_list下。

 

 

 

分享到:
评论

相关推荐

    jquery tmpl模板(实例讲解)

    本文将通过实例讲解的方式来介绍如何使用jquery tmpl模板,以及相关的关键点。 ### jQuery tmpl模板的基本概念 在开始实例之前,我们先来理解几个关键概念: - **模板(Template)**:模板是预先定义好的HTML结构...

    jquery tmpl

    **jQuery tmpl 模板技术详解** 在Web开发中,数据绑定和动态内容渲染是不可或缺的部分。jQuery tmpl 是一个轻量级的JavaScript模板引擎,它允许开发者将数据与HTML结构分离,实现更高效的页面渲染和更新。这篇详述...

    微软的 jquery.tmpl.min.js,浏览器兼容性最强

    总的来说,jQuery tmpl.min.js是jQuery生态中一颗璀璨的明珠,它通过提供高效、易用的模板引擎,极大地提升了Web应用的数据呈现能力,同时保持了良好的浏览器兼容性。无论你是新手还是经验丰富的开发者,掌握这一...

    jquery-tmpl

    《jQuery tmpl:强大的JavaScript模板引擎解析》 在前端开发中,数据绑定和动态渲染是常见的需求,jQuery tmpl作为一款强大的JavaScript模板引擎,为开发者提供了高效、简洁的解决方案。本文将深入探讨jQuery tmpl...

    jquery.tmpl.js

    《jQuery tmpl.js 模板引擎详解及应用》 在Web开发中,模板引擎是一种非常重要的工具,它允许开发者将数据和HTML结构分离,提高代码的可读性和复用性。jQuery tmpl.js是jQuery的一个插件,它提供了一种简单而强大的...

    jQuery 模板

    jQuery tmpl通过`&lt;script&gt;`标签来定义模板,通常设置`type`属性为`text/x-jquery-tmpl`。例如: ```html &lt;script type="text/x-jquery-tmpl" id="userListTpl"&gt; ${Name} ${Email} ``` 这里的`id`属性用于...

    jquery前台模板demo(很实用的)

    在jQuery中,虽然没有内置的模板引擎,但可以借助第三方库如Mustache、Handlebars或jQuery自己的插件如jQuery tmpl来实现。这些模板引擎支持各种模板语法,使开发者能够灵活地设计和渲染数据。 **四、使用jQuery...

    最简单的jquery-tmpl渲染Demo

    4. **渲染模板**:使用jQuery的`.tmpl()`方法将数据应用到模板上,并将其插入到DOM中。如下所示: ```javascript $("#myTemplate").tmpl(data).appendTo("#listContainer"); ``` 在这个例子中,`#listContainer`是...

    jquery-tmpl-master.zip

    本文将深入探讨jQuery-Tmpl,一个用于在jQuery中实现模板引擎的插件,以及它如何帮助开发者构建动态、数据驱动的用户界面。 一、jQuery-Tmpl简介 jQuery-Tmpl是jQuery的一个扩展,提供了模板编译和渲染的功能。这...

    jquery.tmpl.js使用例子

    这段代码首先定义了一个数据对象,然后使用jQuery选择器找到模板(这里模板的id为"template"),并调用`.tmpl()`方法,传入数据对象,最后将渲染后的结果追加到页面的`body`元素中。 tmpl.js也支持条件语句,如`{{...

    放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解

    举例来说,一个简单的jQuery Tmpl模板可能如下所示: ```html &lt;script type="text/x-jquery-tmpl" id="testTemplate"&gt; {{if name}} &lt;h1&gt;{{= name}} {{else}} &lt;p&gt;No name provided. {{/if}} {{each items}} ...

    JQuery模板插件 jquery.tmpl 动态ajax扩展

    在上一篇文章中我们已经探讨了jQuery.tmpl的基本用法,但在实际开发中,我们经常需要根据用户交互、URL参数或其他动态条件来异步加载模板或数据。这就是动态Ajax扩展的作用。 动态Ajax扩展是jQuery.tmpl的一个重要...

    tmpl 模板插件

    总结来说,tmpl模板插件是jQuery生态中的一个实用工具,它简化了数据绑定和动态页面渲染的过程,使得开发者可以更专注于业务逻辑,而不是繁琐的DOM操作。通过合理运用tmpl,可以构建出响应迅速、易于维护的Web应用。...

    jquery.tmpl JQuery模板插件

    需要注意的是,JQuery.tmpl模板插件虽然方便易用,但它在最新版的jQuery中并不是默认包含的,因为jQuery核心团队推荐使用其他模板解决方案,如Mustache或者Handlebars。这并不影响JQuery.tmpl本身的使用,但如果需要...

    jquery-tmpl-master.zip新版

    添加的版本:1.4.3 jQuery.tmpl(template [,data] [,options]) template用作模板的HTML标记或文本。 数据的数据呈现。这可以是任何JavaScript类型,包括Array或Object。 options用户定义的键/值对的可...

    jQuery .tmpl(), .template()大全集

    而`.tmpl()`和`.template()`是jQuery UI中的两个重要功能,用于模板引擎,帮助开发者构建动态数据驱动的用户界面。这篇综合指南将深入探讨这两个方法的用法和原理,以帮助你更好地理解和应用它们。 首先,我们来...

Global site tag (gtag.js) - Google Analytics