Bringing it all back

Einsatz von Knockout Upshot und Back-Button mit Nav.js (Teil 2)
Kommentare

Windows Developer

Der Artikel „Bringing it all back“ von Manfred Steyer ist erstmalig erschienen im Windows Developer 8.2012
Die in Listing 2 an $ übergebene Funktion wird von jQuery nach dem Laden

Windows Developer

Der Artikel „Bringing it all back“ von Manfred Steyer ist erstmalig erschienen im Windows Developer 8.2012

Die in Listing 2 an $ übergebene Funktion wird von jQuery nach dem Laden der Seite angestoßen. Sie kümmert sich um das Setzen der durch den serverseitigen Controller bereitgestellten Metadaten für Hotelbuchungen, um das Instanziieren und Binden des MainViewModels sowie um das Registrieren von Ereignisbehandlungsroutinen. Daneben wird mit der jQuery-UI-Funktion dialog jener Dialog vorbereitet, den die View zum Hinzufügen einer neuen Buchung anzeigen soll.

Die Ereignisbehandlungsroutine, die mittels jQuery an die Click-Ereignisse sämtlicher th-Tags gebunden wird und für das Sortieren nach der jeweiligen Spalte verantwortlich ist, entnimmt unter Verwendung der Funktion data den Namen der Spalte, nach der Upshot sortieren soll, aus einem benutzerdefinierten Attribut. Da an dieser Stelle an data der Wert sort übergeben wird, geht jQuery davon aus, dass dieses Attribut den Namen data-sort trägt.

Listing 2

    $(function () {
            
        upshot.metadata(@(Html.Metadata())); 

        var mainVm = new MainViewModel();
        ko.applyBindings(mainVm);

        var createDialog = $("#createDialog")
                                .dialog({
                                    autoOpen: false, 
                                    closeOnEscape: false, 
                                    buttons:{ 
                                        "Hinzufügen": function() {
                                            $("#addForm").submit();
                                        }, 
                                        "Schließen": function() {
                                            $(this).dialog("close");
                                        } 
                                    }, 
                                    modal: true, 
                                    title: "Buchung hinzufügen"});
 
        $("th").click(function() { 
            var sort = $(this).data("sort");
            mainVm.setSortedBy(sort);
        });
 
        $("#createNewButton").click(function() { 
            createDialog.dialog("open");
        });

        $("#CreateButton").click(function() {
            mainVm.addNew(); 
            $(this).dialog("close"); 
        });
 
    });  

Die HTML-basierte View mit Bindungsausdrücken ist in Listing 3 ersichtlich. Sie beinhaltet wie gewohnt Bindungsausdrücke für den Brückenschlag mit dem ViewModel. Das disable Binding deaktiviert einige Elemente unter bestimmten Umständen. Zum Beispiel deaktiviert es die Schaltfläche Neu, wenn kein Hotel ausgewählt wurde. Das div-Tag createDialog, das für den Dialog zum Hinzufügen neuer Buchungen herangezogen wird, verwendet das von Upshot bereitgestellte validate Binding. Dieses verweist auf die Eigenschaft validationConfig, die die vom ViewModel bereitgestellten Metadaten zum Validieren von Buchungen beinhaltet. Zusätzlich verwendet dieses Tag das Binding with. Damit legt es fest, dass sich alle Bindungsausdrücke in den geschachtelten Elementen nicht auf das ViewModel selbst, sondern auf dessen Eigenschaft newHotelBuchung beziehen. Das macht auch Sinn, da diese Eigenschaft die hinzuzufügende Buchung repräsentiert. Die einzelnen Elemente, die Daten dieser Buchung repräsentieren, nutzen auch eines der von Knockout bereitgestellten Bindings. Die Rede ist hier vom autovalidate Binding, das angibt, dass die eingetragenen Werte entsprechend der validationConfig zu validieren sind. Eventuelle Fehlermeldungen werden beim Einsatz dieses Bindings standardmäßig neben dem jeweiligen Steuerelement angezeigt.

Listing 3



Vorname Nachname Eingetroffen Aktionen
...
Vorname
Nachname
Preis
Eingetroffen
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -