Für ein kleineres Projekt habe ich vor einiger Zeit eine HTML5-Single-Page-Application entwickelt und stand dann vor dem Problem wie ich unterschiedliche Views innerhalb dieser Seite realisiere. Da ich möglichst ohne schwerfälliges Framework auskommen wollte, habe ich mich für eine Lösung mittels jQuery entschieden. Im HTML habe ich dazu mehrere Views definiert:
<div id="options" class="widget" style="display: none"> </div> <div id="game" class="widget"> </div>
Der Inhalt des div-Elements mit der Id options ist dabei standardmäßig ausgeblendet. Nun kann die Ansicht der beiden Views mittels der Funktion switchView gewechselt werden:
switchView() {
if(this.activeView==this.Views.Game) {
$("#game").css({"display": "none"});
$("#options").css({"display": "block"});
this.activeView = this.Views.Options;
}
else if (this.activeView==this.Views.Options) {
$("#options").css({"display": "none"});
$("#game").css({"display": "block"});
this.activeView = this.Views.Game;
}
}
In der Funktion wird das CSS der jeweiligen div-Elemente manipuliert. Dadurch wird die Sichtbarkeit der Blöcke gewechselt und man hat eine einfache View Umschaltung realisiert.