artTemplate 模板使用

Posted 2020-09-18

下载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