underscore.js中template

来源:互联网 发布:excel数据 access 编辑:程序博客网 时间:2024/06/05 03:38

(1)定义html脚本

<script id="user-avatar" type="text/template">
        <div class="follow-user-avatar" data-id="<%- user['user_id'] %>" >
            <div class="user-avatar layzr-image">
                <a href="<%- user['link_href'] %>" title="<%- user['nickname'] %>">
                    <% if (user['avatar']) { %>
                    <img class="img" src="<%- user['avatar'] %>" alt="头像">
                    <% } else { %>
                    <span class="default-img">
                        <img class="img" src="{{ asset('/static/image/headshot_250x250.png') }}">
                    </span>
                    <% } %>
                </a>
            </div>
        </div>

 </script>

(2)加载underscore.js,写脚本

var user = response.body.user,

//获取脚本HTML
      avatarTemplate = _.template($('#user-avatar').html());
      avatarTemplateHtml = avatarTemplate({
            user: user  //加载数据,得到拼好的HTML块
       });
$('.follow-number').html(response.body.favorited_count);
if (response.body.favorited_count === 1) {
      $('.follow-user-row').prepend(avatarTemplateHtml);
      $('.product-follower-row').show();
} else {
      $('.follow-user-row').prepend(avatarTemplateHtml);
}

0 0