zoukankan      html  css  js  c++  java
  • 两种方法实现性别的判定

    template.helper(name, callback)

    name:必传,辅助事件的名称。

    callback:必传,辅助事件的回调函数。

    return:undefined

    所谓的辅助事件,主要用于处理一些参数。

    例如:性别,我们通常存储0和1来表示女和男,但是界面其实要展示的是“女”和“男”字符串信息。

    1、使用helper()方法来实现男女的展示:

    <div id="user_info"></div>
    <script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/html" id="user_tmpl">
        <div>姓名:<span>{{name}}</span></div>
        <div>性别:<span>{{sex | getSexName}}</span></div>
        <div>学校:<span>{{school}}</span></div>
    </script>
    <script type="text/javascript">
        var data = {
            name: "小明",
            sex: 1,
            school: "新华小学"
        };
        template.helper("getSexName", function(data) {
            if (data == "0") {
                return "";
            } else {
                return "";
            }
        });
        var user = template("user_tmpl", data);
        document.getElementById("user_info").innerHTML = user;
    </script>

    由示例可以看出,辅助事件是在调用渲染函数前定义的,使用的写法为{{参数的值 | 辅助事件名称}}。

    2、采用artTemplate.js的if语法实现:

    <div id="user_info"></div>
    <script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/html" id="user_tmpl">
        <div>姓名:<span>{{name}}</span></div>
        <div>性别:<span>{{if sex==0}}女{{else}}男{{/if}}</span></div>
        <div>学校:<span>{{school}}</span></div>
    </script>
    <script type="text/javascript">
        var data = {
            name: "小明",
            sex: 1,
            school: "新华小学"
        };
        var user = template("user_tmpl", data);
        document.getElementById("user_info").innerHTML = user;
    </script>

    从例子我们看出,if是需要开始和结束的,如果有其他条件判定,则直接使用{{else}}即可。

  • 相关阅读:
    狗 日 的 360
    Django搭建简单的站点
    ZOJ 3675 Trim the Nails(bfs)
    Qt移动应用开发(二):使用动画框架
    SPOJ QTREE2 lct
    [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容
    Bitmap工具类BitmapHelper
    Material-design icon生成插件
    闲聊ROOT权限——ROOT权限的前世今生
    Java深入浅出系列(四)——深入剖析动态代理--从静态代理到动态代理的演化
  • 原文地址:https://www.cnblogs.com/xiaoyucoding/p/5556608.html
Copyright © 2011-2022 走看看