温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

【JS】JsRender模板插件的使用

发布时间:2020-05-29 13:00:19 来源:网络 阅读:1457 作者:fanpan26 栏目:编程语言

  新公司项目,同事推荐了我JsRender 模板插件,用了感觉挺好用的,至少比拼接字符串方便的多,而且支持绑定和函数判断,以及一些其他的高级用法,我用到的有,数据绑定,if else 判断,和方法绑定等。废话不多说,开始介绍。(并非jsRender学习,只是个人项目总结)


先看一段代码:

<script type="text/x-jsrender" id="letterSendUserInfoTemplate">
    <img class="header" src="{{:headPhotos}}" onerror="javascript:this.src=''" />
    <div class="info_warp">

        <div class="info_inner">
            <span class="username">{{:name}}</span>
            <span class="userinfo">{{:title1String}}</span>
            <span class="userinfo">{{:title2String}}</span>
        </div>
        <p class="micro_text">
            {{:microMotto}}
        </p>
    </div>
</script>

没错,以上就是模板了,{{}}里的就是要绑定的Model数据。首页,页面上引用jsrender.js不多说,如果绑定上述模板的的话,方法如下:

 var tabhtml = $("#letterSendUserInfoTemplate").render(data);
                letter.options.leftlettertabcontainer.html(tabhtml);
  var data=[{headPhotos:'',name:'',title1String:'',title2String:'',microMotto:''},
  {headPhotos:'',name:'',title1String:'',title2String:'',microMotto:''}];

其实很简单,如果是ajax请求的话,只要把返回的数据项绑定到相应的html上,然后用模板的render方法得到相应的html,赋值给相应的div或者其他元素,就OK了, 省去了自己拼写html并且难维护的麻烦。


使用功能一: for循环

 {{for #data}}html代码{{/for}}

使用功能二:if else 根据不同的条件判断给元素赋值不同的class

class="{{if placeMent==0}}other `else`self{{/if}} {{if isRead}}`else`notRead{{/if}} clearfix"

使用功能三:用js方法,将时间转换为固定格式,注意ShortTimeFormatter方法必须放在$.views.helpers里面

$.views.helpers({
    TimeFormatter: function (time) {
        var t = time.split('T');
        var result = t[0].substr(0, 10) + ' ' + t[1].substr(0, 5);
        return result;
    },
    ShortTimeFormatter: function (time) {
        var t = time.split('T');
        var result = t[0].substr(2, 8) + ' ' + t[1].substr(0, 5);
        return result;
    },
    LastTimeFormatter: function (time) {
        return $.getDateDiff(time);
    }
});
<div class="release_time">
                    {{>~ShortTimeFormatter(addTime)}}
                </div>

好啦,项目中目前就用到这么几个简单的方法,不过jsrender应该会更强大一些,只不过我没有用到,对此感兴趣的可以上网艘一下吧,没错,  JsRender

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

sr
AI