Aureliaを使用して動的に別の行の画像を作成する

Question

HTML、Cordova、Aurelia、Bootstrapを使用してモバイルアプリケーションを作成しています。アプリケーションには画像をアップロードし、サムネイルの行を作成する機能があります。 Aureliaを初めて使用することになりましたが、挑戦は4つの画像からなる行が必要だということです。現在の行が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

このシナリオでは、アシュリーの答えは正しいです。 ただし、このリストの項目数がx個のラップ要素を含むリストをレンダリングする必要がある場合があります。 リストをグループ化して2回反復することで、これを解決できます。一度グループ化されたリストとこのループの中で、子リストの別のループ。 VMをこのグループ化されたリストで汚染しないのは、それがUI専用のものであれば、コンバーターに属するからです。例：https://gist.run/?id=9d624d96d86c7e0ad1c0919fd5fb8819

Answer 2

私はここ要旨でコードを置く：https://gist.run/?id=fb3631fe09d44395fd352c29e145c4a0

をあるとしてそれは私には正常に見えます。

ブートストラップは反応的なので、1行あたり4枚の画像に「ロック」することはできません。特定の画面幅よりも1行あたり1つの画像に移動します。

app.jsのイメージアレイのディメンションで再生して、ブートストラップがさまざまな処理をどのように処理するかを確認できます。