2016-07-22 38 views
0

Ich erstelle eine mobile Anwendung mit HTML, Cordova, Aurelia und Bootstrap. Die Anwendung kann Bilder hochladen und eine Reihe von Miniaturansichten erstellen. Da es das erste Mal ist, dass ich Aurelia für mich benutze, besteht die Herausforderung darin, dass ich eine Reihe brauche, die nur aus 4 Bildern besteht. Ich muss die Anwendung eine neue Reihe von Bildern erstellen lassen, nachdem die aktuelle Zeile ihr viertes Bild erreicht. Ich suchte im Internet nach Lösungen, fand aber nichts, was meinen Bedürfnissen entsprach, außer dass ich irgendwie einen Wertkonverter einbauen musste. Weiß jemand, wie ich diese Aufgabe erfüllen würde? Jede Hilfe würde sehr geschätzt werden. Ich habe meinen ursprünglichen Code unten eingefügt, der so ziemlich der Code ist, den ich hatte, bevor ich wusste, dass ich dynamisch zusätzliche Zeilen erstellen müsste.Erstellen Sie dynamisch eine andere Reihe von Bildern mit Aurelia

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

Danke für Ihre Hilfe !!!!!

Antwort

1

Ashleys Antwort ist in diesem Szenario richtig. Manchmal kann es jedoch erforderlich sein, eine Liste mit einem Umbruchelement zu rendern, das x Menge von Elementen aus dieser Liste enthält. Sie können dies lösen, indem Sie die Liste gruppieren und zweimal durchlaufen. Einmal auf der gruppierten Liste und innerhalb dieser Schleife eine weitere Schleife auf den Kinderlisten. Sie sollten Ihre VM mit dieser gruppierten Liste nicht verschmutzen, wenn sie nur für UI-Zwecke gedacht ist, also in einen Konverter gehört. Beispiel: https://gist.run/?id=9d624d96d86c7e0ad1c0919fd5fb8819

+0

Danke für Ihre Antwort. Ich werde weiter auf Ihren Vorschlag eingehen, da es so aussieht, als würde sich die Verwendung von Bootstrap als unberechenbar erweisen, wie die Bilder eingebunden werden. Ich brauche etwas Bestimmteres und Konsequenteres. – cnotes

+0

Der Konverter war genau das, wonach ich suchte. Vielen Dank!!!!! – cnotes

1

Ich habe den Code in einem Kern hier: https://gist.run/?id=fb3631fe09d44395fd352c29e145c4a0

Es sieht für mich in Ordnung, wie ist.

Bootstrap ist reaktionsfähig, so dass Sie nicht auf 4 Bilder pro Zeile per "sperren" können. Es wird zu einem Bild pro Zeile unterhalb einer bestimmten Bildschirmbreite gehen.

Sie können mit den Dimensionen im Bilder-Array in app.js spielen, um zu sehen, wie Bootstrap verschiedene Dinge behandeln wird.

+0

Vielen Dank für Ihre Antwort. – cnotes

Verwandte Themen