Question

我正在使用HTML，Cordova，Aurelia和Bootstrap创建移动应用程序。该应用程序能够上传图像并创建一行缩略图。因为这是我第一次使用Aurelia，所面临的挑战是我需要一行只包含4张图像。我需要让应用程序在当前行到达它的第四个图像后创建一个新的图像行。我在网上寻找解决方案，但除了我可能需要以某种方式合并价值转换器之外，我并没有真正找到适合我需求的东西。有谁知道我将如何完成这项任务？任何帮助将不胜感激。我已经在下面包含了我的原始代码，这几乎就是我知道我必须动态创建其他行之前的代码。

<div class="row">
    <div class="col-sm-3" repeat.for="image of images">
        <div class="thumbnail">
            <img src.bind="image | blobToUrl" />
            <div class="caption text-center">                                                             
                <button type="button" class="btn btn-default" click.trigger="setCoverPhoto($index)" data-toggle="tooltip" title="Use as cover">Set Cover</button>
                <button type="button" class="btn btn-default" click.trigger="removeAttachment($index)" data-toggle="tooltip" title="Remove photo">Remove</button>
            </div>
        </div>
    </div>
</div>

感谢您的帮助!!!!!

Answer 1

我把你的代码放在一个要点：https://gist.run/?id=fb3631fe09d44395fd352c29e145c4a0

我看起来很好。

Bootstrap具有响应性，因此您无法“锁定”每行4个图像本身。它将在特定屏幕宽度下每行一个图像。

您可以使用app.js中图像数组中的尺寸来查看引导程序如何处理不同的事物。

Answer 2

在这种情况下，阿什利的回答是正确的。但有时可能需要使用包含此列表中x项目的包装元素来呈现列表。您可以通过对列表进行分组并迭代两次来解决此问题。一旦在分组列表上并在此循环内，在子列表上的另一个循环。如果仅用于UI目的，您不应该使用此分组列表污染您的VM，因此它属于转换器。示例：https://gist.run/?id=9d624d96d86c7e0ad1c0919fd5fb8819

使用Aurelia动态创建另一行图像

2 个答案: