前端卡片展示

       现在前端经常会用到卡片类的展示，比如多张银行卡的展示。这个时候需要用到一个统一的前端模板以保证样式的一致，我们只需要通过后台获取一个List,然后向模板中塞数据即可，然后将模板append到一个列表展示的div中。

       这里采用的是Jquery.

        引入js文件主要如下

      <script type="text/javascript" src="jquery.validate.js"></script>

      先根据UI图，画一个静态的卡片，调好样式过后，开始使用占位符对需要动态数据改变的地方进行占位,做成模板并隐藏。从后台获取数据后将模板向<div>中进行append,代码如下。

<div id="card_list"></div>

<textarea id="m_template" style="display: none;">
    <div class="m_box">
        <div class="m_head">
            <div class="head_body_text">
                <h5 class="head_body_text_left">文本1</h5>
                <h5 class="">{0}</h5>
            </div>
         <div class="head_body_text"> 
               <h5 class="head_body_text_left">文本2</h5> 
               <h5 class="">{1}</h5> 
         </div>
        </div>
    </div>
</textarea>

ajax从后台拿数据后，填充模板，向div中append 模板html 的js代码如下:

url:"-----",
type:"get",
success:function(data){
    if(data && data.retCode == '0'){
        var list = data.returnVal;
        var appendHtml = '';
        for(var i = 0; i < list.length; i++){
            var ret = userList[i];
            var html_template = $("#m_template").text();
            appendHtml += $.validator.format(html_template, ret.变量1, ret.变量2);
        }
        $("#card_list").html(appendHtml);
    }
},

如果需要向模板中还要在填充模板的话，这个时候需要唯一确定是在哪一个模板后填充哪一个模板，这个时候需要使append的<div>中的id在js代码中生成，以确定是哪一个div。上代码

<textarea id="m_template" style="display: none;">
    <div class="c_box">
        <div class="c_head">
            <div class="c_body_text">
                <h5 class="channel_body_text_left">文本1</h5>
                <h5 class="channel_body_merchantNo">{0}</h5>          
            </div>
            <div class="channel_body_text">
                <h5 class="c_body_text_left">文本2</h5>
                <h5 class="c_body_amount">{1}</h5>
            </div>
        </div>
        <div id='{0}'></div>//需要在这里在动态拼模板，这里的id必须选择一个列表中唯一确定的值。
    </div>
</textarea>