前端常用插件之art-template模板引擎

前端常用插件之art-template模板引擎


最近,发现一个插件——渲染动态HTML页面的利器,个人觉得有必要与大家分享一下,它就是art-template模板引擎。

1. 准备环境:

① Bootstrap文件:bootstrap.min.cssbootstrap.min.js

② jQuery文件:jquery-1.11.3.min.js

③ Template文件:template.min.js

 前端常用插件之art-template模板引擎_第1张图片

这里文件网上都有(尽量用最新版本),大家可以自行下载。

 

2. 代码实现:

需求:修改用户信息。

Html代码:

<head>
    <title>修改用户信息title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
head>
<body>
    <div id="updateUser" style="width: 510px;">
        <h3 style="text-align: center;margin-bottom: 30px;">修改用户信息h3>
        <form id="update-user-frm" class="form-horizontal">form>
    div>

    
    
<script type="text/html" id="update-user-tpl">

        <div class="control-group">
            <div class="control-label">用户名:div>
            <div class="controls text-nowrap">
                <input type="text" name="loginName" value="{{userInfo && userInfo.loginName}}" placeholder="请输入用户名" autocomplete="off" />
            div>
        div>
        <div class="control-group">
            <div class="control-label">密码:div>
            <div class="controls text-nowrap">
                <input type="text" name="pwd" value="{{userInfo && userInfo.pwd}}" placeholder="请输入密码" autocomplete="off" />
            div>
        div>
        <div class="control-group">
            <div class="control-label">角色:div>
            <div class="controls text-nowrap">
                {{each roles as role i}}
                <label class="radio">
                    <input type="radio" value="{{role.id}}" name="roleIds"/> {{role.name}}
                label>
                {{/each}}
            div>
        div>

        <button type="button" class="save-user" style="margin-left: 180px;">保存button>

    script>

    
    
<script src="./js/jquery-1.11.3.min.js">script>
    <script src="./js/bootstrap.min.js">script>
    
    
<script src="./js/template.min.js">script>

    <script src="./js/updateUser.js">script>

body>
html>

Js代码

(function(){    

// 渲染"修改用户信息"页面
    updateUser
();

    function updateUser() {
        var userInfo = {
            'loginName': '张三',
            'pwd': '123456'
        
};
        var roles = [
            {id: '1', name: '普通用户'},
            {id: '2', name: '开发管理员'},
            {id: '3', name: '测试管理员'},
            {id: '4', name: '超级管理员'},
            {id: '5', name: '业务管理员'}
        ];

        var updateUserHtml = template('update-user-tpl', {userInfo: userInfo, roles: roles});
        $("#update-user-frm").html(updateUserHtml);

    }

}());

运行结果:(直接在浏览器打开updateUser.html)

前端常用插件之art-template模板引擎_第2张图片

3. art-template功能介绍

1)页面代码模板:

从上面代码可知,html里面定义了一个template模板:<script type="text/html" id="update-user-tpl">......script>,这样在js文件里面调用template的方法template(id, param),就可以渲染模板页面,然后,将渲染好的模板页面添加到想要放的html页面里面,即$("#update-user-frm").html(updateUserHtml);

template(id, param)方法,它有两个参数:

id——template模板ID,标识;

param——template模板动态渲染对象参数,可以没有,是一个obj对象,可以通过key-value的方式传递多个属性参数;

(2)基本运算操作:

上面只使用了一种类似for循环:{{each roles as role i}}{{/each}}

这里,roles是数组对象,role是数组里面的单个对象,i是数组索引。


具体就不一一介绍了,大家自行网上查看吧。


你可能感兴趣的:(前端,前端常用插件)