artTemplate 模板使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了artTemplate 模板使用相关的知识,希望对你有一定的参考价值。

下载github中文件,浏览器引用lib/template-web.js

模板html:

{{each ProductInfoList as prd}}
<div class="result-item clearfix">
    <div class="item-left clearfix" pid="{{prd.PrdId}}">
        <div class="left-img">
            <img src="{{prd.OrgLogo}}" >
        </div>
        <div class="left-infor">
            <p class="infor-title">
                <span class="item-compant">{{(prd.ShortOrgName==null||prd.ShortOrgName=="")?prd.OrgName:prd.ShortOrgName}}</span>-<span class="item-product">{{prd.PrdName}}</span>
            </p>
            <p class="infor-label clearfix">
                {{#prd.PrdTitles}}
            </p>
            <div class="infor-detail f-pr">
                <p>
                    要求:22-25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。
                    要求:22-25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。
                </p>
                <section class="ruleDetail">
                    <div class="">
                        <ul class="detail-rule">
                            <li>
                                <h5>规则1</h5>
                                <p>要求:22-25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。</p>

                            </li>
                            <li>
                                <h5>规则2</h5>
                                <p>要求:22-25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。25周岁,打卡工资税后4000以上,现单位工作满3个月;征信要求半年无2,一年无3,征信空白不可做。</p>

                            </li>
                        </ul>
                        <p class="detail-notice">注:如有多条规则时,满足其中一组即可。</p>
                        <ul class="detail-saying">
                            <h5>补充说明</h5>
                            <li class="clearfix"><span class="saying-index">1、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">2、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">3、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">4、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">5、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">6、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">7、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">8、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">9、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">10、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">11、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                            <li class="clearfix"><span class="saying-index">12、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
                        </ul>
                    </div>
                    <span class="shade"></span>

                </section>
            </div>
            {{if prd.PrdComment!=null}}
            <p class="infor-comment f-pr">
                <i></i> {{prd.PrdComment}}
            </p>
            {{/if}}
        </div>
    </div>
    <div class="item-right clearfix">
        <div class="right-infor f-fl">
            <p class="infor-interest">利息总额<span class="interest-amount">{{prd.StrTotalInterest}}</span>月费率<span class="interest-rate">{{prd.MonthlyRateLeast2}}</span></p>
            <div class="infor-rate f-pr">
                <p>{{prd.RateTitle}}<span class="rate-total f-pr curPointer">{{prd.RateStrMonthly}}<i></i></span></p>
                {{if prd.RateDetailList}}
                <ul class="rate-detail">
                    {{#prd.RateDetailList}}
                </ul>
                {{/if}}
            </div>
            <p class="infor-time">放款时间<span>{{prd.PrtPassLeast}}天</span></p>
        </div>
        <div class="right-btn f-fr">
            <p class="btn"><a href="">查看详情</a></p>
            <p class="saying"><span>{{prd.ApplyUserCount}}</span>人成功申请</p>
        </div>
    </div>
</div>
{{/each}}

引用局部视图

<script id="productList" type="text/html">
    @Html.Partial("TemplateProductList")
</script>
 

js操作;

var list = data.ProductInfoList;
                    if (list!=null&&list.length > 0) {
                        $(list).each(function (key, val) {
                            var titles = "";
                            if (val.AssureTypeName != "" && val.AssureTypeName != null) {
                                titles += "   <span class=‘label-key‘>" + val.AssureTypeName + "</span> ";
                            }
                            if (val.PrtTypeName != "" && val.PrtTypeName != null) {
                                titles += " <span class=‘label-key‘>" + val.PrtTypeName + "</span>";
                            }
                            if (val.IdentityName != "" && val.IdentityName != null) {
                                var arr = val.IdentityName.split(‘,‘);
                                $(arr).each(function (k, v) {
                                    titles += "   <span>" + v + "</span>";
                                })
                            }
                            val.PrdTitles = titles;
                            if (val.PriceRateDetailsList.length > 0) {
                                var first = val.PriceRateDetailsList[0];
                                val.StrTotalInterest = first.StrTotalInterest;
                                val.MonthlyRateLeast2 = (val.MonthlyRateLeast == 0 || val.MonthlyRateLeast == null) ? "面议" : parseFloat(val.MonthlyRateLeast / 1.8).toFixed(2) + "%";
                                val.RateTitle = first.Title;
                                val.RateStrMonthly = first.StrMonthly;
                                var cont = "";
                                if (val.MonthlyRateLeast != null && val.MonthlyRateLeast > 0) {
                                    $(val.PriceRateDetailsList).each(function (k, v) {
                                        if (v.StrMonthly != "面议" && v.StrMonthly != "--") {
                                            cont += " <li class=\"rate-item clearfix\">";
                                            cont += "<div class=\"item-title f-pr\">";
                                            cont += " <i></i><span>" + v.Title + ":</span>";
                                            cont += "  </div>";
                                            cont += "<div class=\"item-detail noBorder\">";
                                            cont += "    <p class=\"detailTitle\">" + v.Text + "</p>";
                                            if (v.BackType == 1) {
                                                cont += "   <p class=\"detailSaying\">每月按相等的金额偿还本息,是较常用的还款方式</p>";
                                            } else if (v.BackType == 2) {
                                                cont += "   <p class=\"detailSaying\">每月本金保持相同,利息逐月递减;起初还款压力较大,但总利息较低</p>";
                                            }
                                            else if (v.BackType == 3) {
                                                cont += "   <p class=\"detailSaying\">按期还利息,期终还本金,还款压力小</p>";
                                            }
                                            else if (v.BackType == 4) {
                                                cont += "   <p class=\"detailSaying\">期终一次性还清本金和总利息</p>";
                                            }
                                            else if (v.BackType == 5) {
                                                cont += "   <p class=\"detailSaying\">按日计息,用多久付多少,方便灵活</p>";
                                            }
                                            cont += "  </div>";
                                            cont += "  </li>";
                                        }
                                    })
                                }
                                val.RateDetailList = cont;
                            }
                        })
                    }
                    var content = template(‘productList‘, data);

                    $(".proList-result").children().remove();
                    $(".proList-result").append(content);

注意其中的

var content = template(‘productList‘, data);

嗯,还是比较好用的。

 

http://blog.csdn.net/jiazimo/article/details/39232425

https://github.com/aui/art-template

以上是关于artTemplate 模板使用的主要内容,如果未能解决你的问题,请参考以下文章

使用 artTemplate模板

基础 - artTemplate模板

artTemplate模板的使用

artTemplate 模板使用

arttemplate与webpack的应用

js模板引擎--artTemplate