zoukankan      html  css  js  c++  java
  • JQuery.tmpl()的用法

    动态请求数据来更新页面是现在非常常用的方法,现在通过Ajax请求返回的数据更多的是json对象,
    为了解决js动态拼接数据这方面的问题,JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl。

    Tmpl提供了几种tag:

    ${}:等同于{{=}},是输出变量,通过了html编码的。
    {{html}}:输出变量html,但是没有html编码,适合输出html代码。
    {{if }} {{else}}:提供了分支逻辑。
    {{each}}:提供循环逻辑,$value访问迭代变量。

    jquery tmpl的使用方法:
    模板定义:
    ${}为json的键的值,必须要填写正确,和<%#Eval()%>这个作用一样

    先设置好模板:

        <script id="movieTemplate" type="text/x-jquery-tmpl">
        <li>
        <b>${Name}</b> (${ReleaseYear})
        </li>
        </script>

    再看数据源:

    var movies = [
    { Name: "The Red Violin", ReleaseYear: "1998" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
    { Name: "The Inheritance", ReleaseYear: "1976" }
    ];

    最后Script 代码:

    <script src="/js/jquery.tmpl.min.js"></script>
         
         $( "#movieTemplate" ).tmpl( movies )  //获得替换占位符后的值
            .appendTo( "#movieList" );
  • 相关阅读:
    在阿里云服务器上安装MySQL
    mui中调用ajax时报abort错误
    IDEA根据数据库表生成pojo对象
    java.io.IOException: All specified directories have failed to load.
    mysql隔离级别
    java8新特性
    数据库语言分类
    Spring AOP 代码示例
    java NIO学习(二)
    java NIO学习(一)
  • 原文地址:https://www.cnblogs.com/Raymond201508/p/4805635.html
Copyright © 2011-2022 走看看