Wie zu zwingen, angewandt Meteors Blaze zu Änderungen im Batch-Block #each

Question

Ich habe eine Vorlage, die zu meist gleichwertig ist:

<div class="line"> 
{{#each part in line}} 
    <span class="part">{part}</span> 
{{/each}} 
</div> 

wo die line: string[] ist eine Partition von einer einzigen Zeile in einem oder mehr Teile. Das Problem ist, dass, wenn sich der Inhalt von line ändert, die Vorlage versucht, alte Elemente mit neuen Elementen abzugleichen (was in Ordnung ist) und Änderungen einzeln auf das DOM anwendet (was nicht in Ordnung ist). Insbesondere wenn der alte Wert line["Hello","world"] war und der neue ["Hello world"] ist, dann gibt es einen kurzen Zeitraum, in dem dem Benutzer ein neuer Wert von line[0] kombiniert mit dem alten Wert line[1], der ["Hello world","world"] ist, präsentiert wird. Meistens wird dies unbemerkt, aber wenn die Teile im Vergleich zur Bildschirmbreite lang genug sind, kann es vorkommen, dass <span class="part">Hello world</span><span class="part">world</span> nicht in eine Zeile passt, was wiederum bewirkt, dass der ganze weitere Inhalt um eine Zeile nach unten verschoben wird , nur um später wieder eine Zeile höher verschoben zu werden, wenn line[1] endgültig entfernt wird.

Eine Lösung, die ich derzeit verwende, ist das Ersetzen der gesamten #each Schleife mit benutzerdefinierten Helfer {{{ helpMeRenderThisLine line }}}, die die HTML-Zeichenfolge manuell erstellt, aber das verstößt offensichtlich Trennung der Bedenken und meine Code-Stil.

Ich bin neu zu Meteor, aber diese sind die Richtungen würde ich gerne genauer untersuchen:

• Gibt es eine Möglichkeit, eine Schleife nicht-reaktiv zu machen? Ich habe gehört, es gab etwas wie #constant Block, aber es wird nicht mehr unterstützt.
• Gibt es eine Möglichkeit, den gesamten Aktualisierungsprozess in einen einzelnen DOM Reflow zu "batch"?
• Gibt es eine Möglichkeit, das Impulspaket zu verwenden, um das Flimmern zu entfernen?
• Gibt es eine Möglichkeit, eine kleinere Blaze-Vorlage zu verwenden, um die Einzelzeile nicht reaktiv zu machen?

Answer 1

Is there a way to render a loop non-reactively? I've heard there was something like #constant block, but it is no longer supported. 

Es ist ziemlich einfach, einen Teil des DOM nicht reaktiv zu machen: Sie gerade einen nicht-reaktiven Helfer verwenden müssen. Z.B. in Ihrer Vorlage rendered oder created Funktion, können Sie Ihr String-Array an Ihre Vorlage Instanz (kein Cursor mit this.myStrings = Collection.find() aber ein Array mit this.myStrings = Collection.find().fetch(), this ist Ihre Vorlage Instanz) anhängen.

Sie kehren dann in Ihrem Helfer return Template.instance().myStrings

Is there a way to "batch" the whole updating process into a single DOM reflow? 

Eigentlich verwendet wird, hängt davon ab, wie Sie die Originaldaten zu aktualisieren. Die obige Lösung sollte das tun. Beachten Sie, dass Sie Vorlagen verschachteln können, um die Granularität der DOM-Aktualisierungen zu steuern. Stellen Sie außerdem sicher, dass Sie Ihre Abonnements steuern, falls sie sich mit den gleichen veröffentlichten Inhalten überschneiden.Sie können warten, jeder bereit mit Template.subscribtionReady() (Template-Ebene) oder subscribtion.ready() (Unterstufe) seinem

Is there a way to use the momentum package to remove the flicker? 

Das Flackern weggehen soll, wenn Sie richtig die Daten zu aktualisieren.

Is there a way to use a smaller Blaze template to render the single line in non-reactive fashion? 

Nicht sicher, was Sie hier fragen, aber eine gute Übung wäre, zu versuchen Komponentenebene Vorlagen zu machen, ist es den DOM-Rendering bei der Feinabstimmung helfen könnte.

<div class="line"> 
{{#each part in line}} 
    {{> Part}} 
{{/each}} 
</div>