余烬模板中的缩略图

Thumbnails in ember template

本文关键字：略图 余烬模      更新时间：2024-03-26

我正在构建我的第一个具有用户模板的ember应用程序。它按名称显示我的用户列表。我希望他们显示为一组缩略图，而不是使用他们的头像图片。

<script type = "text/x-handlebars" id = "users">
<div>{{usersCount}}</div>
<div class="col-md-2">
{{#link-to "users.create"}}<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></button> {{/link-to}}
</div>
<div class="col-md-10">
  <ul class="users-listing">
  {{#each user in controller}}
  <li>
    {{#link-to "user" user}}
      {{user.name}}
    {{/link-to}}
  </li>
{{/each}}
</ul>
{{outlet}}
</div>
</script>

我一直在尝试使用引导缩略图来做到这一点，但收效甚微：

<div class="row">
  <div class="col-sm-6 col-md-3">
{{#each user in controller}}
    <a href="#" class="thumbnail">
      <img data-src="user.avatar">
{{/each}}
    </a>
  </div>
</div>

有人能提出解决方案吗？

请参阅{{bind-attr}}:的文档

{{#each}}
  <a href="#" class="thumbnail">
    <img {{bind-attr src=avatar}}>
  </a>
{{/each}}

还要注意，在Bootstrap中，data-src属性仅用于占位符图像，而不是您想要实际显示的图像。

相关文章：