Aurelia Repeater rendert anders als der gleiche hartcodierte Inhalt

Question

Ich versuche mit einem Beispiel eines CSS-Grids zu arbeiten. Aber wenn ich es mit Aurelia Repeater verwende, wird es im Browser seltsam. Ich habe versucht, alles in nur einfache Stile zu isolieren, aber immer noch das gleiche Problem. Zuerst ist es der Repeater und dann habe ich das genaue Ergebnis des Repeaters unten hart codiert. Beachten Sie, dass es egal ist, in welcher Reihenfolge Sie sie platzieren.

Versucht ein Beispiel hier zu erstellen: https://gist.run/?id=0dbb9921dd8997e0ddbbeeba8bca9dd6

Das einzige, was Sie in Ihrem app.js stellen müssen, ist:

export class App { 
    constructor() { 
    this.styleString = "width:25%;display:inline-block;min-height:1px;vertical-align:top;padding-left:20px;margin-right:-.25em;box-sizing:border-box;"; 
    } 
} 

Und Sie app.html:

<template> 
    <div> 
    <div repeat.for="i of 4" style="background:${i%2==0?'red':'green'};${styleString}"> 
     ${i} 
    </div> 
    </div> 
    <div> 
    <div style="background:red;${styleString}"> 
     0 
    </div> 
    <div style="background:green;${styleString}"> 
     1 
    </div> 
    <div style="background:red;${styleString}"> 
     2 
    </div> 
    <div style="background:green;${styleString}"> 
     3 
    </div> 
    </div> 
</template> 

Kann jemand klären, was ich falsch mache?

EDIT

Es tut uns leid. Das seltsame Verhalten ist, dass in meinem Browser die Breite der vier Spalten nicht so breit ist wie die vier Spalten, die ich fest codiert habe. Es ist nicht in voller Länge.

Ich bin in der Lage, den Fehler zu reproduzieren, wenn ich den OUTER HTML des äußeren Div in Entwickler-Tools kopieren und es in meine app.html einfügen. Aber wenn ich das korrekt in Bezug auf Einrückung und korrekte Zeilenumbrüche formatiere, ergibt es das, was meiner Ansicht nach korrekt ist.

ERKLÄRUNG

Als Fabio in seinem Kommentar weist darauf hin, es der weiße Raum ist, dass der Unterschied ist. Das CSS-Raster, das ich auswerte, berücksichtigt dies und fügt diesen Stil margin-right:-.25em; hinzu, da erwartet wird, dass Sie weiße Leerzeichen zwischen Ihren divs haben. Sie können darüber in dem von Andrew bereitgestellten Link lesen.

Die einfachste Lösung könnte sein, einfach eine Klasse hinzuzufügen, wenn ich diese Gitterspalten mit Aurelia-Repeater erzeuge, die die margin-right überschreiben und auf Null setzen.

Answer 1

Sie haben ein interessantes Problem in der Tat :)
Ihr Problem liegt darin, wie div mit inline-block Attribute verursacht eine "unerklärliche" Lücke verursacht. Mehr Details dazu finden Sie hier (Why is there an unexplainable gap between these inline-block div elements?).
Dies ist definitiv eine interessante Situation, und es könnte sich lohnen, im Aurelia Templating Repo (https://github.com/aurelia/templating) zu melden, so dass sie ihre repeat.for Bindung erhalten können, um sich genau wie der Browser zu verhalten.

Um Ihre Frage spezifisch zu beantworten, haben Sie zwei Möglichkeiten (auch, Sie tun nichts falsches, keine Sorge).
1. Sie können den <div> Klassen, die die repeat.for-Syntax verwenden, eine Klasse hinzufügen, um die kleine Pixellücke hinzuzufügen, sodass sie ähnlich aussieht wie der Browser.
2. Sie können die Pixellücke im normalen Browser <div> wie im zuvor verlinkten Stack-Überlauf-Post erläutert entfernen.
3. Gemäß dieser comment können Sie auch nur die Leerzeichen entfernen und es sollte in beiden Situationen gut funktionieren.

Hoffe, das hilft.