使用Picnicss在Ember中创建缩略图图片网格

Question

我正在使用其中一个组件在该项目中使用该卡进行项目。 我试图建立这样的图片缩略图：

X X X X X
X X X X X
X X X X X

其中x是可能具有200px * 200px

的图片

当我尝试以下操作时：

<div class="row">
  {{#each model}}
    <div class="third">
      <article class="card">
        <img {{bind-attr src="someimage"}}>
      </article>
    </div>
  {{/each}}
</div>

它不会显示我的所有图像。如何让{{#each}}知道开始新行所需的每7个数据？

Answer 1

所以我回答我的问题。 我使用数组分隔路径中的数据，因此数组将有行和列，然后我可以在模板中迭代数组

Answer 2

路由中的

model挂钩应该返回从外部服务（您的后端）获取的原始数据。

第一个案例

您只需将此数据用于特定目的，您可以在afterModel挂钩内进行数据格式操作。

第二种情况

数据由同一路径（URL）内的多个组件共享。让组件通过创建计算属性来确定如何显示数据，该属性根据您的需要格式化数据。