https://de.wikipedia.org/w/index.php?action=history&feed=atom&title=Model_View_ViewModel
Model View ViewModel - Versionsgeschichte
2025-06-06T05:43:52Z
Versionsgeschichte dieser Seite in Wikipedia
MediaWiki 1.45.0-wmf.4
https://de.wikipedia.org/w/index.php?title=Model_View_ViewModel&diff=256641993&oldid=prev
SchlurcherBot: Bot: http → https
2025-06-03T02:12:58Z
<p>Bot: http → https</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 3. Juni 2025, 04:12 Uhr</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Zeile 19:</td>
<td colspan="2" class="diff-lineno">Zeile 19:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* ''ViewModel:'' Enthält die UI-Logik (Model der View) und dient als Bindeglied zwischen View und obigem Model. Einerseits tauscht es Information mit dem Model aus, ruft also [[Methode (Programmierung)|Methoden]] oder [[Dienst (Informatik)|Dienste]] auf. Andererseits stellt es der View öffentliche [[Sprachelemente von C-Sharp#Eigenschaften (Schlüsselwörter get, set und value)|Eigenschaften]] und [[Kommando (Entwurfsmuster)|Befehle]] zur Verfügung. Diese werden von der View an [[Steuerelement]]e gebunden, um Inhalte auszugeben bzw. UI-Ereignisse weiterzuleiten. Das ViewModel darf dabei keinerlei Kenntnis der View besitzen.</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* ''ViewModel:'' Enthält die UI-Logik (Model der View) und dient als Bindeglied zwischen View und obigem Model. Einerseits tauscht es Information mit dem Model aus, ruft also [[Methode (Programmierung)|Methoden]] oder [[Dienst (Informatik)|Dienste]] auf. Andererseits stellt es der View öffentliche [[Sprachelemente von C-Sharp#Eigenschaften (Schlüsselwörter get, set und value)|Eigenschaften]] und [[Kommando (Entwurfsmuster)|Befehle]] zur Verfügung. Diese werden von der View an [[Steuerelement]]e gebunden, um Inhalte auszugeben bzw. UI-Ereignisse weiterzuleiten. Das ViewModel darf dabei keinerlei Kenntnis der View besitzen.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Muster kann als technologie-spezifisch bezeichnet werden, da für die Verknüpfung von View und ViewModel ein Datenbindungsmechanismus benötigt wird. Diese Infrastruktur wird häufig als ''Binder'' bezeichnet.<ref>{{Internetquelle |url=<del style="font-weight: bold; text-decoration: none;">http</del>://books.zkoss.org/zk-mvvm-book/8.0/data_binding/binder.html |titel=Binder {{!}} |abruf=2025-03-27}}</ref> Im Detail handelt es sich hierbei um einen bidirektionalen Einsatz des [[Beobachter (Entwurfsmuster)|Beobachter-Muster]]s. ''Binder'', welche eine Datenbindung auf Basis von deklarativen Angaben etablieren können, sind für verschiedene Techniken vorhanden.</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Muster kann als technologie-spezifisch bezeichnet werden, da für die Verknüpfung von View und ViewModel ein Datenbindungsmechanismus benötigt wird. Diese Infrastruktur wird häufig als ''Binder'' bezeichnet.<ref>{{Internetquelle |url=<ins style="font-weight: bold; text-decoration: none;">https</ins>://books.zkoss.org/zk-mvvm-book/8.0/data_binding/binder.html |titel=Binder {{!}} |abruf=2025-03-27}}</ref> Im Detail handelt es sich hierbei um einen bidirektionalen Einsatz des [[Beobachter (Entwurfsmuster)|Beobachter-Muster]]s. ''Binder'', welche eine Datenbindung auf Basis von deklarativen Angaben etablieren können, sind für verschiedene Techniken vorhanden.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== .NET und JavaFX ===</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== .NET und JavaFX ===</div></td>
</tr>
<tr>
<td colspan="2" class="diff-lineno">Zeile 36:</td>
<td colspan="2" class="diff-lineno">Zeile 36:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Die [[Geschäftslogik]] kann unabhängig von der Darstellung bearbeitet werden. MVVM „erbt“ die leichtere Austauschbarkeit der View vom [[Model View Controller|MVC]]-Muster.</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Die [[Geschäftslogik]] kann unabhängig von der Darstellung bearbeitet werden. MVVM „erbt“ die leichtere Austauschbarkeit der View vom [[Model View Controller|MVC]]-Muster.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Die Testbarkeit verbessert sich, da die ViewModel die UI-Logiken enthalten und unabhängig von der View instanziiert werden können. Hierdurch sind keine UI-Tests nötig. Stattdessen genügen codebasierte [[Modultest]]s des ViewModel.</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Die Testbarkeit verbessert sich, da die ViewModel die UI-Logiken enthalten und unabhängig von der View instanziiert werden können. Hierdurch sind keine UI-Tests nötig. Stattdessen genügen codebasierte [[Modultest]]s des ViewModel.</div></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Die Menge von [[Glue Code]] zwischen Model und View wird durch den Verzicht von Controller-Instanzen gegenüber dem MVC-Muster reduziert.<ref>{{cite web| author = John Gossman| title = Tales from the Smart Client: Advantages and disadvantages of M-V-VM.| url = <del style="font-weight: bold; text-decoration: none;">http</del>://blogs.msdn.com/johngossman/archive/2006/03/04/543695.aspx| accessdate=2012-05-28}}</ref></div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* Die Menge von [[Glue Code]] zwischen Model und View wird durch den Verzicht von Controller-Instanzen gegenüber dem MVC-Muster reduziert.<ref>{{cite web| author = John Gossman| title = Tales from the Smart Client: Advantages and disadvantages of M-V-VM.| url = <ins style="font-weight: bold; text-decoration: none;">https</ins>://blogs.msdn.com/johngossman/archive/2006/03/04/543695.aspx| accessdate=2012-05-28}}</ref></div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Views können von reinen UI-Designern gestaltet werden, während Entwickler unabhängig davon die Models und ViewModels implementieren.</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Views können von reinen UI-Designern gestaltet werden, während Entwickler unabhängig davon die Models und ViewModels implementieren.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Es können unterschiedliche Views erstellt werden, die alle an dasselbe ViewModel gebunden werden, ohne dass dort Änderungen an der Programmierung vorgenommen werden müssen.</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Es können unterschiedliche Views erstellt werden, die alle an dasselbe ViewModel gebunden werden, ohne dass dort Änderungen an der Programmierung vorgenommen werden müssen.</div></td>
</tr>
<tr>
<td colspan="2" class="diff-lineno">Zeile 61:</td>
<td colspan="2" class="diff-lineno">Zeile 61:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Weblinks ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Weblinks ==</div></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* [<del style="font-weight: bold; text-decoration: none;">http</del>://www.norberteder.com/model-view-viewmodel-die-serie/ Norbert Eder: Model-View-ViewModel Die Serie] – Codebeispiel</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* [<ins style="font-weight: bold; text-decoration: none;">https</ins>://www.norberteder.com/model-view-viewmodel-die-serie/ Norbert Eder: Model-View-ViewModel Die Serie] – Codebeispiel</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Einzelnachweise ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Einzelnachweise ==</div></td>
</tr>
</table>
SchlurcherBot
https://de.wikipedia.org/w/index.php?title=Model_View_ViewModel&diff=254590039&oldid=prev
Schotterebene: Formatierung Beleg
2025-03-27T11:16:03Z
<p>Formatierung Beleg</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 27. März 2025, 13:16 Uhr</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Zeile 8:</td>
<td colspan="2" class="diff-lineno">Zeile 8:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Geschichte ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Geschichte ==</div></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM wurde 2005 von [[Microsoft MVP]] John Gossman veröffentlicht. Es ist eine Spezialisierung des ''Presentation Model'' von [[Martin Fowler]]<ref><del style="font-weight: bold; text-decoration: none;">[http</del>://martinfowler.com/eaaDev/PresentationModel.html Presentation Model<del style="font-weight: bold; text-decoration: none;">]</del></ref> und ist mit diesem insofern identisch, als beide Muster Zustand und Verhalten der View in ein separates UI-Model (Presentation bzw. View Model) verschieben. Das ''Presentation Model'' ermöglicht allerdings das Erzeugen einer View unabhängig von der UI-Plattform, wohingegen das MVVM ursprünglich auf UIs mittels WPF abzielt. Es findet allerdings inzwischen auch in anderen Bereichen Anwendung, ähnlich wie bei MVC.</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM wurde 2005 von [[Microsoft MVP]] John Gossman veröffentlicht. Es ist eine Spezialisierung des ''Presentation Model'' von [[Martin Fowler]]<ref><ins style="font-weight: bold; text-decoration: none;">{{Internetquelle |url=https</ins>://martinfowler.com/eaaDev/PresentationModel.html <ins style="font-weight: bold; text-decoration: none;">|titel=</ins>Presentation Model<ins style="font-weight: bold; text-decoration: none;"> |abruf=2025-03-27}}</ins></ref> und ist mit diesem insofern identisch, als beide Muster Zustand und Verhalten der View in ein separates UI-Model (Presentation bzw. View Model) verschieben. Das ''Presentation Model'' ermöglicht allerdings das Erzeugen einer View unabhängig von der UI-Plattform, wohingegen das MVVM ursprünglich auf UIs mittels WPF abzielt. Es findet allerdings inzwischen auch in anderen Bereichen Anwendung, ähnlich wie bei MVC.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Beschreibung ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Beschreibung ==</div></td>
</tr>
<tr>
<td colspan="2" class="diff-lineno">Zeile 19:</td>
<td colspan="2" class="diff-lineno">Zeile 19:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* ''ViewModel:'' Enthält die UI-Logik (Model der View) und dient als Bindeglied zwischen View und obigem Model. Einerseits tauscht es Information mit dem Model aus, ruft also [[Methode (Programmierung)|Methoden]] oder [[Dienst (Informatik)|Dienste]] auf. Andererseits stellt es der View öffentliche [[Sprachelemente von C-Sharp#Eigenschaften (Schlüsselwörter get, set und value)|Eigenschaften]] und [[Kommando (Entwurfsmuster)|Befehle]] zur Verfügung. Diese werden von der View an [[Steuerelement]]e gebunden, um Inhalte auszugeben bzw. UI-Ereignisse weiterzuleiten. Das ViewModel darf dabei keinerlei Kenntnis der View besitzen.</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* ''ViewModel:'' Enthält die UI-Logik (Model der View) und dient als Bindeglied zwischen View und obigem Model. Einerseits tauscht es Information mit dem Model aus, ruft also [[Methode (Programmierung)|Methoden]] oder [[Dienst (Informatik)|Dienste]] auf. Andererseits stellt es der View öffentliche [[Sprachelemente von C-Sharp#Eigenschaften (Schlüsselwörter get, set und value)|Eigenschaften]] und [[Kommando (Entwurfsmuster)|Befehle]] zur Verfügung. Diese werden von der View an [[Steuerelement]]e gebunden, um Inhalte auszugeben bzw. UI-Ereignisse weiterzuleiten. Das ViewModel darf dabei keinerlei Kenntnis der View besitzen.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Muster kann als technologie-spezifisch bezeichnet werden, da für die Verknüpfung von View und ViewModel ein Datenbindungsmechanismus benötigt wird. Diese Infrastruktur wird häufig als ''Binder'' bezeichnet<ref><del style="font-weight: bold; text-decoration: none;">[</del>http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/binder.html Binder<del style="font-weight: bold; text-decoration: none;">-Definition aus</del> <del style="font-weight: bold; text-decoration: none;">dem</del> <del style="font-weight: bold; text-decoration: none;">ZK</del>-<del style="font-weight: bold; text-decoration: none;">Framework]</del></ref><del style="font-weight: bold; text-decoration: none;">.</del> Im Detail handelt es sich hierbei um einen bidirektionalen Einsatz des [[Beobachter (Entwurfsmuster)|Beobachter-Muster]]s. ''Binder'', welche eine Datenbindung auf Basis von deklarativen Angaben etablieren können, sind für verschiedene Techniken vorhanden.</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Muster kann als technologie-spezifisch bezeichnet werden, da für die Verknüpfung von View und ViewModel ein Datenbindungsmechanismus benötigt wird. Diese Infrastruktur wird häufig als ''Binder'' bezeichnet<ins style="font-weight: bold; text-decoration: none;">.</ins><ref><ins style="font-weight: bold; text-decoration: none;">{{Internetquelle |url=</ins>http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/binder.html <ins style="font-weight: bold; text-decoration: none;">|titel=</ins>Binder <ins style="font-weight: bold; text-decoration: none;">{{!}}</ins> <ins style="font-weight: bold; text-decoration: none;">|abruf=2025</ins>-<ins style="font-weight: bold; text-decoration: none;">03-27}}</ins></ref> Im Detail handelt es sich hierbei um einen bidirektionalen Einsatz des [[Beobachter (Entwurfsmuster)|Beobachter-Muster]]s. ''Binder'', welche eine Datenbindung auf Basis von deklarativen Angaben etablieren können, sind für verschiedene Techniken vorhanden.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== .NET und JavaFX ===</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== .NET und JavaFX ===</div></td>
</tr>
<tr>
<td colspan="2" class="diff-lineno">Zeile 30:</td>
<td colspan="2" class="diff-lineno">Zeile 30:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Android ===</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Android ===</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Muster und die Datenbindung kann ebenfalls bei der Implementierung mobiler [[Android (Betriebssystem)|Android]]-Anwendungen verwendet werden.<ref><del style="font-weight: bold; text-decoration: none;">[http</del>://developer.android.com/<del style="font-weight: bold; text-decoration: none;">tools</del>/data-binding<del style="font-weight: bold; text-decoration: none;">/guide.html Android</del> Data Binding <del style="font-weight: bold; text-decoration: none;">Guide]</del> <del style="font-weight: bold; text-decoration: none;">(englisch)</del></ref></div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Muster und die Datenbindung kann ebenfalls bei der Implementierung mobiler [[Android (Betriebssystem)|Android]]-Anwendungen verwendet werden.<ref><ins style="font-weight: bold; text-decoration: none;">{{Internetquelle |url=https</ins>://developer.android.com/<ins style="font-weight: bold; text-decoration: none;">topic/libraries</ins>/data-binding<ins style="font-weight: bold; text-decoration: none;">?hl=de</ins> <ins style="font-weight: bold; text-decoration: none;">|titel=</ins>Data Binding <ins style="font-weight: bold; text-decoration: none;">Library</ins> <ins style="font-weight: bold; text-decoration: none;">{{!}} App architecture |abruf=2025-03-27}}</ins></ref></div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Vor- und Nachteile ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Vor- und Nachteile ==</div></td>
</tr>
</table>
Schotterebene
https://de.wikipedia.org/w/index.php?title=Model_View_ViewModel&diff=250013052&oldid=prev
2.203.233.245: /* Geschichte */
2024-11-03T18:00:57Z
<p><span class="autocomment">Geschichte</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 3. November 2024, 20:00 Uhr</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Zeile 8:</td>
<td colspan="2" class="diff-lineno">Zeile 8:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Geschichte ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Geschichte ==</div></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM wurde 2005 von [[Microsoft MVP]] John Gossman veröffentlicht. Es ist eine Spezialisierung des Presentation Model von [[Martin Fowler]]<ref>[http://martinfowler.com/eaaDev/PresentationModel.html Presentation Model]</ref> und ist mit diesem insofern identisch, als beide Muster Zustand und Verhalten der View in ein separates UI-Model (Presentation bzw. View Model) verschieben. Das ''Presentation Model'' ermöglicht allerdings das Erzeugen einer View unabhängig von der UI-Plattform, wohingegen das MVVM ursprünglich auf UIs mittels WPF abzielt. Es findet allerdings inzwischen auch in anderen Bereichen Anwendung, ähnlich wie bei MVC.</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM wurde 2005 von [[Microsoft MVP]] John Gossman veröffentlicht. Es ist eine Spezialisierung des <ins style="font-weight: bold; text-decoration: none;">''</ins>Presentation Model<ins style="font-weight: bold; text-decoration: none;">''</ins> von [[Martin Fowler]]<ref>[http://martinfowler.com/eaaDev/PresentationModel.html Presentation Model]</ref> und ist mit diesem insofern identisch, als beide Muster Zustand und Verhalten der View in ein separates UI-Model (Presentation bzw. View Model) verschieben. Das ''Presentation Model'' ermöglicht allerdings das Erzeugen einer View unabhängig von der UI-Plattform, wohingegen das MVVM ursprünglich auf UIs mittels WPF abzielt. Es findet allerdings inzwischen auch in anderen Bereichen Anwendung, ähnlich wie bei MVC.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Beschreibung ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Beschreibung ==</div></td>
</tr>
</table>
2.203.233.245
https://de.wikipedia.org/w/index.php?title=Model_View_ViewModel&diff=250013029&oldid=prev
2.203.233.245: /* Geschichte */ Link auf MVP entfernt. Presentation Model ist ungleich MVP.
2024-11-03T18:00:14Z
<p><span class="autocomment">Geschichte: </span> Link auf MVP entfernt. Presentation Model ist ungleich MVP.</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 3. November 2024, 20:00 Uhr</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Zeile 8:</td>
<td colspan="2" class="diff-lineno">Zeile 8:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Geschichte ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Geschichte ==</div></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM wurde 2005 von [[Microsoft MVP]] John Gossman veröffentlicht. Es ist eine Spezialisierung des <del style="font-weight: bold; text-decoration: none;">[[Model View Presenter|</del>Presentation Model<del style="font-weight: bold; text-decoration: none;">]]</del> von [[Martin Fowler]]<ref>[http://martinfowler.com/eaaDev/PresentationModel.html Presentation Model]</ref> und ist mit diesem insofern identisch, als beide Muster Zustand und Verhalten der View in ein separates UI-Model (Presentation bzw. View Model) verschieben. Das ''Presentation Model'' ermöglicht allerdings das Erzeugen einer View unabhängig von der UI-Plattform, wohingegen das MVVM ursprünglich auf UIs mittels WPF abzielt. Es findet allerdings inzwischen auch in anderen Bereichen Anwendung, ähnlich wie bei MVC.</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM wurde 2005 von [[Microsoft MVP]] John Gossman veröffentlicht. Es ist eine Spezialisierung des Presentation Model von [[Martin Fowler]]<ref>[http://martinfowler.com/eaaDev/PresentationModel.html Presentation Model]</ref> und ist mit diesem insofern identisch, als beide Muster Zustand und Verhalten der View in ein separates UI-Model (Presentation bzw. View Model) verschieben. Das ''Presentation Model'' ermöglicht allerdings das Erzeugen einer View unabhängig von der UI-Plattform, wohingegen das MVVM ursprünglich auf UIs mittels WPF abzielt. Es findet allerdings inzwischen auch in anderen Bereichen Anwendung, ähnlich wie bei MVC.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Beschreibung ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Beschreibung ==</div></td>
</tr>
</table>
2.203.233.245
https://de.wikipedia.org/w/index.php?title=Model_View_ViewModel&diff=249500093&oldid=prev
Uncopy: Ersetze Illustration durch SVG-Version derselben Infografik
2024-10-17T11:00:07Z
<p>Ersetze Illustration durch SVG-Version derselben Infografik</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 17. Oktober 2024, 13:00 Uhr</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Zeile 1:</td>
<td colspan="2" class="diff-lineno">Zeile 1:</td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:MVVMPattern.<del style="font-weight: bold; text-decoration: none;">png</del>|miniatur|hochkant=2|MVVM-Konzept: Die Datenbindung (Data Binding) ermöglicht die Trennung von View (z.&nbsp;B. XAML-Markup oder HTML) und Model für die Darstellung.]]</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:MVVMPattern.<ins style="font-weight: bold; text-decoration: none;">svg</ins>|miniatur|hochkant=2|MVVM-Konzept: Die Datenbindung (Data Binding) ermöglicht die Trennung von View (z.&nbsp;B. XAML-Markup oder HTML) und Model für die Darstellung.]]</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Model View ViewModel''' ('''MVVM''') ist ein [[Entwurfsmuster]] und eine Variante des [[Model View Controller|Model-View-Controller]]-Musters (MVC). Es dient zur Trennung zwischen Darstellung und Logik der [[Benutzerschnittstelle]] (UI) und des [[Frontend und Backend|Software-Backends]]. Das Entwurfsmuster ist die Standardimplementierung von UI-Plattformen wie [[Cocoa (API)|Cocoa]] ([[Apple]]), [[Windows Presentation Foundation]] (WPF, [[Microsoft]]) und [[JavaFX]] ([[Oracle]]). Im Webbrowser wird das Muster durch bestimmte [[JavaScript]]-[[Framework|Frameworks]] wie [[React]] oder [[Knockout.js]] verfügbar, welche den Zustand einer [[HTML5]]-Benutzeroberfläche verwalten können. Die Unterteilung der Benutzeroberfläche in [[Komponentenbasierte Entwicklung|Komponenten]], die aufeinander aufbauen und schlussendlich als View die gesamte Applikationsoberfläche darstellen, wird ''[[Kompositum (Entwurfsmuster)|Compositing]]'' genannt und ist typisch für MVVM-Anwendungen.</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Model View ViewModel''' ('''MVVM''') ist ein [[Entwurfsmuster]] und eine Variante des [[Model View Controller|Model-View-Controller]]-Musters (MVC). Es dient zur Trennung zwischen Darstellung und Logik der [[Benutzerschnittstelle]] (UI) und des [[Frontend und Backend|Software-Backends]]. Das Entwurfsmuster ist die Standardimplementierung von UI-Plattformen wie [[Cocoa (API)|Cocoa]] ([[Apple]]), [[Windows Presentation Foundation]] (WPF, [[Microsoft]]) und [[JavaFX]] ([[Oracle]]). Im Webbrowser wird das Muster durch bestimmte [[JavaScript]]-[[Framework|Frameworks]] wie [[React]] oder [[Knockout.js]] verfügbar, welche den Zustand einer [[HTML5]]-Benutzeroberfläche verwalten können. Die Unterteilung der Benutzeroberfläche in [[Komponentenbasierte Entwicklung|Komponenten]], die aufeinander aufbauen und schlussendlich als View die gesamte Applikationsoberfläche darstellen, wird ''[[Kompositum (Entwurfsmuster)|Compositing]]'' genannt und ist typisch für MVVM-Anwendungen.</div></td>
</tr>
</table>
Uncopy
https://de.wikipedia.org/w/index.php?title=Model_View_ViewModel&diff=242941482&oldid=prev
Herzmut: kleinere Überarbeitungen
2024-03-09T01:38:56Z
<p>kleinere Überarbeitungen</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 9. März 2024, 03:38 Uhr</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Zeile 1:</td>
<td colspan="2" class="diff-lineno">Zeile 1:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:MVVMPattern.png|miniatur|hochkant=2|MVVM-Konzept: Die Datenbindung (Data Binding) ermöglicht die Trennung von View (z.&nbsp;B. XAML-Markup oder HTML) und Model für die Darstellung.]]</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Datei:MVVMPattern.png|miniatur|hochkant=2|MVVM-Konzept: Die Datenbindung (Data Binding) ermöglicht die Trennung von View (z.&nbsp;B. XAML-Markup oder HTML) und Model für die Darstellung.]]</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>'''Model View ViewModel''' ('''MVVM''') ist ein [[Entwurfsmuster]] und eine Variante des [[Model View Controller|Model-View-Controller]]-Musters (MVC). Es dient zur Trennung <del style="font-weight: bold; text-decoration: none;">von</del> Darstellung und Logik der [[Benutzerschnittstelle]] (UI). <del style="font-weight: bold; text-decoration: none;">Es</del> <del style="font-weight: bold; text-decoration: none;">zielt</del> <del style="font-weight: bold; text-decoration: none;">auf</del> <del style="font-weight: bold; text-decoration: none;">moderne</del> UI-Plattformen wie [[Cocoa (API)|Cocoa]], [[Windows Presentation Foundation]] (WPF<del style="font-weight: bold; text-decoration: none;">)</del>, [[<del style="font-weight: bold; text-decoration: none;">JavaFX</del>]]<del style="font-weight: bold; text-decoration: none;">,</del> und [[<del style="font-weight: bold; text-decoration: none;">HTML5</del>]] <del style="font-weight: bold; text-decoration: none;">ab,</del> <del style="font-weight: bold; text-decoration: none;">da</del> <del style="font-weight: bold; text-decoration: none;">ein</del> <del style="font-weight: bold; text-decoration: none;">Datenbindungsmechanismus</del> <del style="font-weight: bold; text-decoration: none;">erforderlich</del> <del style="font-weight: bold; text-decoration: none;">ist.</del> <del style="font-weight: bold; text-decoration: none;">Gegenüber</del> <del style="font-weight: bold; text-decoration: none;">dem</del> <del style="font-weight: bold; text-decoration: none;">MVC</del>-<del style="font-weight: bold; text-decoration: none;">Muster</del> <del style="font-weight: bold; text-decoration: none;">kann</del> <del style="font-weight: bold; text-decoration: none;">die</del> <del style="font-weight: bold; text-decoration: none;">Testbarkeit</del> <del style="font-weight: bold; text-decoration: none;">verbessert</del> <del style="font-weight: bold; text-decoration: none;">und der Implementierungsaufwand reduziert werden</del>, <del style="font-weight: bold; text-decoration: none;">da</del> <del style="font-weight: bold; text-decoration: none;">keine</del> <del style="font-weight: bold; text-decoration: none;">separaten</del> [[<del style="font-weight: bold; text-decoration: none;">Model View Controller#Controller|Controller-Instanzen</del>]] <del style="font-weight: bold; text-decoration: none;">erforderlich</del> <del style="font-weight: bold; text-decoration: none;">sind</del>. <del style="font-weight: bold; text-decoration: none;">MVVM</del> <del style="font-weight: bold; text-decoration: none;">erlaubt</del> <del style="font-weight: bold; text-decoration: none;">eine</del> <del style="font-weight: bold; text-decoration: none;">Rollentrennung von UI-Designern und Entwicklern,</del> <del style="font-weight: bold; text-decoration: none;">wodurch</del> [[<del style="font-weight: bold; text-decoration: none;">Schichtenarchitektur</del>|<del style="font-weight: bold; text-decoration: none;">Anwendungsschichten</del>]] <del style="font-weight: bold; text-decoration: none;">von</del> <del style="font-weight: bold; text-decoration: none;">verschiedenen</del> <del style="font-weight: bold; text-decoration: none;">Arbeitsgruppen</del> <del style="font-weight: bold; text-decoration: none;">entwickelt</del> <del style="font-weight: bold; text-decoration: none;">werden</del> <del style="font-weight: bold; text-decoration: none;">können.</del> <del style="font-weight: bold; text-decoration: none;">Designer</del> <del style="font-weight: bold; text-decoration: none;">können</del> <del style="font-weight: bold; text-decoration: none;">einen</del> <del style="font-weight: bold; text-decoration: none;">Fokus</del> <del style="font-weight: bold; text-decoration: none;">auf</del> [[<del style="font-weight: bold; text-decoration: none;">User</del> <del style="font-weight: bold; text-decoration: none;">Experience</del>]] <del style="font-weight: bold; text-decoration: none;">setzen</del> und <del style="font-weight: bold; text-decoration: none;">Entwickler</del> <del style="font-weight: bold; text-decoration: none;">die</del> <del style="font-weight: bold; text-decoration: none;">UI</del>-<del style="font-weight: bold; text-decoration: none;"> und [[Geschäftslogik]] schreiben</del>.</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>'''Model View ViewModel''' ('''MVVM''') ist ein [[Entwurfsmuster]] und eine Variante des [[Model View Controller|Model-View-Controller]]-Musters (MVC). Es dient zur Trennung <ins style="font-weight: bold; text-decoration: none;">zwischen</ins> Darstellung und Logik der [[Benutzerschnittstelle]] (UI)<ins style="font-weight: bold; text-decoration: none;"> und des [[Frontend und Backend|Software-Backends]]</ins>. <ins style="font-weight: bold; text-decoration: none;">Das</ins> <ins style="font-weight: bold; text-decoration: none;">Entwurfsmuster</ins> <ins style="font-weight: bold; text-decoration: none;">ist</ins> <ins style="font-weight: bold; text-decoration: none;">die Standardimplementierung von</ins> UI-Plattformen wie [[Cocoa (API)|Cocoa]]<ins style="font-weight: bold; text-decoration: none;"> ([[Apple]])</ins>, [[Windows Presentation Foundation]] (WPF, [[<ins style="font-weight: bold; text-decoration: none;">Microsoft</ins>]]<ins style="font-weight: bold; text-decoration: none;">)</ins> und [[<ins style="font-weight: bold; text-decoration: none;">JavaFX</ins>]] <ins style="font-weight: bold; text-decoration: none;">([[Oracle]]).</ins> <ins style="font-weight: bold; text-decoration: none;">Im</ins> <ins style="font-weight: bold; text-decoration: none;">Webbrowser</ins> <ins style="font-weight: bold; text-decoration: none;">wird</ins> <ins style="font-weight: bold; text-decoration: none;">das</ins> <ins style="font-weight: bold; text-decoration: none;">Muster</ins> <ins style="font-weight: bold; text-decoration: none;">durch</ins> <ins style="font-weight: bold; text-decoration: none;">bestimmte</ins> <ins style="font-weight: bold; text-decoration: none;">[[JavaScript]]</ins>-<ins style="font-weight: bold; text-decoration: none;">[[Framework|Frameworks]]</ins> <ins style="font-weight: bold; text-decoration: none;">wie</ins> <ins style="font-weight: bold; text-decoration: none;">[[React]]</ins> <ins style="font-weight: bold; text-decoration: none;">oder</ins> <ins style="font-weight: bold; text-decoration: none;">[[Knockout.js]]</ins> <ins style="font-weight: bold; text-decoration: none;">verfügbar</ins>, <ins style="font-weight: bold; text-decoration: none;">welche</ins> <ins style="font-weight: bold; text-decoration: none;">den</ins> <ins style="font-weight: bold; text-decoration: none;">Zustand einer</ins> [[<ins style="font-weight: bold; text-decoration: none;">HTML5</ins>]]<ins style="font-weight: bold; text-decoration: none;">-Benutzeroberfläche</ins> <ins style="font-weight: bold; text-decoration: none;">verwalten</ins> <ins style="font-weight: bold; text-decoration: none;">können</ins>. <ins style="font-weight: bold; text-decoration: none;">Die</ins> <ins style="font-weight: bold; text-decoration: none;">Unterteilung</ins> <ins style="font-weight: bold; text-decoration: none;">der</ins> <ins style="font-weight: bold; text-decoration: none;">Benutzeroberfläche</ins> <ins style="font-weight: bold; text-decoration: none;">in</ins> [[<ins style="font-weight: bold; text-decoration: none;">Komponentenbasierte Entwicklung</ins>|<ins style="font-weight: bold; text-decoration: none;">Komponenten</ins>]]<ins style="font-weight: bold; text-decoration: none;">,</ins> <ins style="font-weight: bold; text-decoration: none;">die</ins> <ins style="font-weight: bold; text-decoration: none;">aufeinander</ins> <ins style="font-weight: bold; text-decoration: none;">aufbauen</ins> <ins style="font-weight: bold; text-decoration: none;">und</ins> <ins style="font-weight: bold; text-decoration: none;">schlussendlich</ins> <ins style="font-weight: bold; text-decoration: none;">als</ins> <ins style="font-weight: bold; text-decoration: none;">View</ins> <ins style="font-weight: bold; text-decoration: none;">die</ins> <ins style="font-weight: bold; text-decoration: none;">gesamte</ins> <ins style="font-weight: bold; text-decoration: none;">Applikationsoberfläche darstellen,</ins> <ins style="font-weight: bold; text-decoration: none;">wird</ins> <ins style="font-weight: bold; text-decoration: none;">''</ins>[[<ins style="font-weight: bold; text-decoration: none;">Kompositum</ins> <ins style="font-weight: bold; text-decoration: none;">(Entwurfsmuster)|Compositing</ins>]]<ins style="font-weight: bold; text-decoration: none;">''</ins> <ins style="font-weight: bold; text-decoration: none;">genannt</ins> und <ins style="font-weight: bold; text-decoration: none;">ist</ins> <ins style="font-weight: bold; text-decoration: none;">typisch</ins> <ins style="font-weight: bold; text-decoration: none;">für MVVM</ins>-<ins style="font-weight: bold; text-decoration: none;">Anwendungen</ins>.</div></td>
</tr>
<tr>
<td colspan="2" class="diff-empty diff-side-deleted"></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td colspan="2" class="diff-empty diff-side-deleted"></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Entwurfsmuster erfordert neben dem Kompositum-Entwurfsmuster auch das [[Beobachter (Entwurfsmuster)|Beobachter]]-Entwurfsmuster, da das ''ViewModel'' den Zustand der UI abbildet, der sich wiederum durch Eingabe- und andere Ereignisse ändert. Die unmittelbare Reaktion der UI auf Änderungen im ''ViewModel'' und umgekehrt realisiert die [[Echtzeit]]-Datenbindung des Musters.</div></td>
</tr>
<tr>
<td colspan="2" class="diff-empty diff-side-deleted"></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td colspan="2" class="diff-empty diff-side-deleted"></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>MVVM erlaubte bei seiner Einführung die heute gebräuchliche Rollentrennung von UI-Designern im Frontend und Entwicklern im Backend, wodurch [[Schichtenarchitektur|Anwendungsschichten]] von verschiedenen Arbeitsgruppen entwickelt werden konnten. Im Desktop-Umfeld eingeführt, findet sich das MVVM-Entwurfsmuster heute in den meisten webbasierten Clients.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Geschichte ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Geschichte ==</div></td>
</tr>
<tr>
<td colspan="2" class="diff-lineno">Zeile 22:</td>
<td colspan="2" class="diff-lineno">Zeile 26:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== JavaScript/HTML ===</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== JavaScript/HTML ===</div></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Muster bzw. der hierzu benötigte Datenbindungsmechanismus wurden im Jahr 2010 von dem Microsoft-Entwickler ''Steve Sanderson'' nach [[JavaScript]] portiert. Die entstandene JavaScript-Bibliothek trägt den Namen [[Knockout.js]]. Mittlerweile findet das MVVM-Muster ebenfalls Einsatz in anderen JavaScript-Frameworks, wie z. B. [[Angular]]. Durch die Verwendung des MVVM-Muster bei client-lastigen [[Webanwendung]]en wird der Implementierungsaufwand reduziert, da sonst übliche manuelle [[Document Object Model|DOM]]-Zugriffe durch die Datenbindung stark reduziert werden können. Die Beschreibung der Datenbindung erfolgt ebenfalls deklarativ, wie bei [[Extensible Application Markup Language|XAML]]-basierten Microsoft-Produkten.</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Muster bzw. der hierzu benötigte Datenbindungsmechanismus wurden im Jahr 2010 von dem Microsoft-Entwickler ''Steve Sanderson'' nach [[JavaScript]] portiert. Die entstandene JavaScript-Bibliothek trägt den Namen [[Knockout.js]]. Mittlerweile findet das MVVM-Muster ebenfalls Einsatz in anderen JavaScript-Frameworks, wie z. B. [[Angular<ins style="font-weight: bold; text-decoration: none;">]], [[Vue.js]] oder [[React</ins>]]. Durch die Verwendung des MVVM-Muster bei client-lastigen [[Webanwendung]]en wird der Implementierungsaufwand reduziert, da sonst übliche manuelle [[Document Object Model|DOM]]-Zugriffe durch die Datenbindung stark reduziert werden können. Die Beschreibung der Datenbindung erfolgt ebenfalls deklarativ, wie bei [[Extensible Application Markup Language|XAML]]-basierten Microsoft-Produkten.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Android ===</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Android ===</div></td>
</tr>
</table>
Herzmut
https://de.wikipedia.org/w/index.php?title=Model_View_ViewModel&diff=228386866&oldid=prev
Christian1985: /* Weblinks */ qualitativ schlechte weblinks entfernt
2022-11-28T16:34:42Z
<p><span class="autocomment">Weblinks: </span> qualitativ schlechte weblinks entfernt</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 28. November 2022, 18:34 Uhr</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Zeile 57:</td>
<td colspan="2" class="diff-lineno">Zeile 57:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Weblinks ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Weblinks ==</div></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* [http://openbook.rheinwerk-verlag.de/visual_csharp_2012/1997_28_005.html Visual C# 2012: Das MVVM-Pattern] – Buchkapitel bei [[Rheinwerk Verlag]]</div></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [http://www.norberteder.com/model-view-viewmodel-die-serie/ Norbert Eder: Model-View-ViewModel Die Serie] – Codebeispiel</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [http://www.norberteder.com/model-view-viewmodel-die-serie/ Norbert Eder: Model-View-ViewModel Die Serie] – Codebeispiel</div></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* [http://nugetmusthaves.com/Tag/MVVM NuGet-Pakete] für MVVM-Frameworks</div></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Einzelnachweise ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Einzelnachweise ==</div></td>
</tr>
</table>
Christian1985
https://de.wikipedia.org/w/index.php?title=Model_View_ViewModel&diff=228386840&oldid=prev
Christian1985: /* MVVM-Frameworks */ Hier geht es um MVVM und nicht um WPF.
2022-11-28T16:33:43Z
<p><span class="autocomment">MVVM-Frameworks: </span> Hier geht es um MVVM und nicht um WPF.</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 28. November 2022, 18:33 Uhr</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Zeile 48:</td>
<td colspan="2" class="diff-lineno">Zeile 48:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[JavaFX]]</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[JavaFX]]</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[SwiftUI]]</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [[SwiftUI]]</div></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Es existieren weiterhin Hilfsbibliotheken, welche die Anwendung von WPF erleichtern sollen. Diese werden auch als MVVM-Frameworks bezeichnet. Dazu gehören</div></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Community MVVM Toolkit</div></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Prism</div></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Crosslight (kommerzielles Framework von der Firma Intersoft Solutions)</div></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* MVVM Light</div></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* Caliburn.Micro</div></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>und viele andere.</div></td>
<td colspan="2" class="diff-empty diff-side-added"></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Siehe auch ==</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Siehe auch ==</div></td>
</tr>
</table>
Christian1985
https://de.wikipedia.org/w/index.php?title=Model_View_ViewModel&diff=228383060&oldid=prev
195.243.57.170: Ein relativ neues und sehr zeitsparendes NugetPackage
2022-11-28T14:18:14Z
<p>Ein relativ neues und sehr zeitsparendes NugetPackage</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 28. November 2022, 16:18 Uhr</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Zeile 51:</td>
<td colspan="2" class="diff-lineno">Zeile 51:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Es existieren weiterhin Hilfsbibliotheken, welche die Anwendung von WPF erleichtern sollen. Diese werden auch als MVVM-Frameworks bezeichnet. Dazu gehören</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Es existieren weiterhin Hilfsbibliotheken, welche die Anwendung von WPF erleichtern sollen. Diese werden auch als MVVM-Frameworks bezeichnet. Dazu gehören</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td colspan="2" class="diff-empty diff-side-deleted"></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* Community MVVM Toolkit</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Prism</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Prism</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Crosslight (kommerzielles Framework von der Firma Intersoft Solutions)</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Crosslight (kommerzielles Framework von der Firma Intersoft Solutions)</div></td>
</tr>
</table>
195.243.57.170
https://de.wikipedia.org/w/index.php?title=Model_View_ViewModel&diff=223586271&oldid=prev
Tramontan: Link verändert auf Nachfolger Angular statt AngularJS
2022-06-10T08:03:49Z
<p>Link verändert auf Nachfolger Angular statt AngularJS</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 10. Juni 2022, 10:03 Uhr</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Zeile 22:</td>
<td colspan="2" class="diff-lineno">Zeile 22:</td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== JavaScript/HTML ===</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== JavaScript/HTML ===</div></td>
</tr>
<tr>
<td class="diff-marker" data-marker="−"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Muster bzw. der hierzu benötigte Datenbindungsmechanismus wurden im Jahr 2010 von dem Microsoft-Entwickler ''Steve Sanderson'' nach [[JavaScript]] portiert. Die entstandene JavaScript-Bibliothek trägt den Namen [[Knockout.js]]. Mittlerweile findet das MVVM-Muster ebenfalls Einsatz in anderen JavaScript-Frameworks, wie z. B. [[<del style="font-weight: bold; text-decoration: none;">AngularJS</del>]]. Durch die Verwendung des MVVM-Muster bei client-lastigen [[Webanwendung]]en wird der Implementierungsaufwand reduziert, da sonst übliche manuelle [[Document Object Model|DOM]]-Zugriffe durch die Datenbindung stark reduziert werden können. Die Beschreibung der Datenbindung erfolgt ebenfalls deklarativ, wie bei [[Extensible Application Markup Language|XAML]]-basierten Microsoft-Produkten.</div></td>
<td class="diff-marker" data-marker="+"></td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Das MVVM-Muster bzw. der hierzu benötigte Datenbindungsmechanismus wurden im Jahr 2010 von dem Microsoft-Entwickler ''Steve Sanderson'' nach [[JavaScript]] portiert. Die entstandene JavaScript-Bibliothek trägt den Namen [[Knockout.js]]. Mittlerweile findet das MVVM-Muster ebenfalls Einsatz in anderen JavaScript-Frameworks, wie z. B. [[<ins style="font-weight: bold; text-decoration: none;">Angular</ins>]]. Durch die Verwendung des MVVM-Muster bei client-lastigen [[Webanwendung]]en wird der Implementierungsaufwand reduziert, da sonst übliche manuelle [[Document Object Model|DOM]]-Zugriffe durch die Datenbindung stark reduziert werden können. Die Beschreibung der Datenbindung erfolgt ebenfalls deklarativ, wie bei [[Extensible Application Markup Language|XAML]]-basierten Microsoft-Produkten.</div></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td>
</tr>
<tr>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Android ===</div></td>
<td class="diff-marker"></td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Android ===</div></td>
</tr>
</table>
Tramontan