Simple Base is an open source CMS. You Simple Base? Support the Team with a coffee.



Vue.js ausprobiert mit einer "Breaking News"-Komponente als Beispiel. Integration in SB denkbar?

Ich hatte mir für ein Projekt Vue.js Framework (ausgesprochen wie "view") angeschaut und ausprobiert. Ich will nicht lange drum herum reden. Ich finde es Klasse! Es ist verdammt einfach die Anzeige auf dem Bildschirm anzupassen. Ich bin ja nun wirklich kein 100 Prozentiger "Frontendler" aber ich kenne mich ganz gut aus damit und es gibt kaum etwas - würde ich einfach mal behaupten - was ich nicht auch mit JavaScript bzw. jQuery hinbekomme. Deshalb verzeiht mir, wenn ihr bei meinen Vorgehen das ein oder andere "anders" oder vielleicht in euren Augen sogar "falsch" mache bzw. gemacht habe, aber - das möchte ich nochmals betonen - ich bin nun mal ein C# Entwickler.

 

Was ist der bisherige Ansatz gewesen?

Nehmen wir mal als Beispiel eine "Aufgabenliste". Diese Aufgabenliste soll im Browser angezeigt werden und dann auch noch gruppiert nach "neu", "in bearbeitung" und "erledigt". Dabei hat man entweder mit jQuery ein Array von Objekten aggregiert und diese in eine z. B. ul-li Liste eingebaut und dann im DOM gerendert oder ein Template Engine Framework verwendet um die Aufgaben darzustellen. Wenn der Benutzer dann den Status der Aufgabe (von Neu auf erledigt, in bearbeitung auf neu usw.) ändert oder eine neue Aufgabe anlegt, so war es in der Regel so, dass ein Event gegriffen hat, das Array mit den Objekten wurde verändert und die "Render"-Methode wurde wieder ausgeführt (Dabei wurde es z. B. am DOM direkt angehängt oder immer neu generiert).

 

Wie ist es mit...




Textinhalt der Seite ganz einfach ändern/anpassen

​Oft muss man einen Text zum testen verändern, um zum Beispiel zu schauen was mit dem Design passiert, wenn man ewig langen Text eingibt.

Dies kann man natürlich auch über die Developer-Toolbar, FireBug und was es da sonst noch so gibt machen. Einfach mit dem Picker ein Element auswählen und das HTML bzw. den Text ändern.

 

Doch es geht noch leichter:

 

document.designMode = "on";

 

Wenn man diese kleine Codezeile in die Konsole der Developer-Toolbar, FireBug etc. ausführt, wird jeder Text der Seite änderbar, so als wäre es ein RTE (bloß eben ohne das Rich). Man kann aber wohl auch contentEditable="true"

 

Hinweis: Die Änderung gilt natürlich nur temporär. Nach einem refresh der Seite ist alles so wie es war.

 

Das funktioniert übrigens auch im IE9, jedoch wohl nicht, wenn die Seite im IE8er Modus läuft. Es gibt auch die Möglichkeit mit

document.body.contentEditable = true;

 

den Text zu ändern. Der Unterschied ist allerdings, dass document.designMode das komplette Dokument bearbeitbar macht, während contentEditable ein einzelnes/spezifisches Element und die Knoten darunter editierbar macht (in dem Beispiel oben ist das spezifische Element eben document.body).

 

Hier noch ein Bild wie es funktioniert bzw. ausschaut (nicht von mir):