在余烬模板中的缩略图

Question

我正在构建我的第一个具有用户模板的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>

我一直在尝试使用bootstrap缩略图来做这件事，但收效甚微：

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

有人可以建议解决方案吗？

Answer 1

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

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

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