Knock you out and shot you up

Moderne Webanwendungen mit knockout.js und upshot.js (Teil 2)
Kommentare

Windows Developer

Der Artikel „Knock you out and shot you up“ von Manfred Steyer ist erstmalig erschienen im Windows Developer 7.2012
Arrays binden
Neben skalaren Werten unterstützt knockout.js auch

Windows Developer

Der Artikel „Knock you out and shot you up“ von Manfred Steyer ist erstmalig erschienen im Windows Developer 7.2012

Arrays binden

Neben skalaren Werten unterstützt knockout.js auch das Binden von Arrays. Der Umgang damit wird in weiterer Folge unter Verwendung einer erweiterten Version der zuvor betrachteten Zinsrechen-Applikation erläutert. Diese bietet die verfügbaren Zinssätze über ein Drop-down-Feld an (Abb. 2). Darüber hinaus erlaubt sie das Warten dieser Zinssätze (Abb. 3).

Abb. 2: Binden von Arrays mit knockout.js
Abb. 2: Binden von Arrays mit knockout.js
Abb. 3: Verwalten von Arrays mit knockout.js
Abb. 3: Verwalten von Arrays mit knockout.js

Listing 3 beinhaltet zu diesem Zweck die Konstruktor-Funktion ZinsVM, die ein ViewModel zur Repräsentation von Zinssätzen erzeugt. Neben den Eigenschaften wert, test und anmerkung beinhaltet dieses ViewModel die Funktion mayDelete, die ermittelt, ob der jeweilige Zinssatz auch gelöscht werden darf. Zur Vereinfachung wird davon ausgegangen, dass alle Zinssätze bis 3 Prozent Standardzinssätze sind, die vom System vorgegeben werden und somit nicht gelöscht werden dürfen.

Listing 3

function ZinsVM(wert, text, anmerkung) {
 
    var $self = this;
 
    $self.wert = ko.observable(wert);
    $self.text = ko.observable(text);
    $self.anmerkung = ko.observable(anmerkung);
 
    $self.mayDelete = function () {
        if ($self.wert() > 3) return true;
        return false;
    }
}  

Eine erweiterte Variante der in den letzten Abschnitten verwendeten ZinsCalcVM-Konstruktor-Funktion findet sich in Listing 4. Diese definiert eine zusätzliche Eigenschaft zinsSatzAuswahl, die die zur Verfügung stehenden Zinssätze in Form von ZinsVM-Objekten beinhaltet. Da diese ein Array sind, das an die View gebunden werden soll, handelt es dabei um ein observableArray. Erzeugt wird es über die Funktion ko.observableArray. Zusätzlich beinhaltet das neu erzeugte Objekt eine Funktion addNewZinsSatz zum Hinzufügen neuer Zinssätze und eine Funktion deleteZinssatz, um einen Zinssatz zu löschen. Die Funktion addNewZinsSatz schnappt sich die Werte der Observables newZinsSatz und newZinsSatzAnmerkung. Damit erzeugt sie ein neues ZinsVM-Objekt, das mit der Funktion push am Ende des Arrays zinsSatzAuswahl angefügt wird. Die Funktion deleteZinssatz nimmt ein zu löschendes ZinsVM-Objekt entgegen und entfernt dieses unter Verwendung von remove aus dem Array zinsSatzAuswahl.

Listing 4

function ZinsCalcVM() {

    var $self = this;

    var stdZinsSaetze = [
        new ZinsVM(1, "1 %", "Standard"),
        new ZinsVM(2, "2 %", "Wenn man gut verhandelt ..."), 
        new ZinsVM(3, "3 %", "Wenn man das Sparbuch sperren lässt")];

    $self.zinsSatzAuswahl = ko.observableArray(stdZinsSaetze);

    $self.kapital = ko.observable();
    $self.tage = ko.observable(360);
    $self.zinsSatz = ko.observable();
    $self.kest = ko.observable(false);
    $self.ergebnis = ko.observable();

    $self.newZinsSatz = ko.observable();
    $self.newZinsSatzAnmerkung = ko.observable();

    $self.calc = function () {
        var zinsen;

        zinsen = $self.kapital() * $self.tage() * $self.zinsSatz() / 36000;

        if ($self.kest()) {
            zinsen = zinsen * 0.75;
        }

        $self.ergebnis(zinsen);
    }

    $self.addNewZinsSatz = function () {

        var wert = $self.newZinsSatz();
        var text = wert + " %";
        var anmerkung = $self.newZinsSatzAnmerkung();

        var newZinsVM = new ZinsVM(wert, text, anmerkung);

        if (!wert || isNaN(wert)) return;

        $self.zinsSatzAuswahl.push(newZinsVM);

        $self.newZinsSatz("");
        $self.newZinsSatzAnmerkung("");
    }

    $self.deleteZinssatz = function (delinquent) {
        $self.zinsSatzAuswahl.remove(delinquent);
    }

}

$(function () {
    var vm = new ZinsCalcVM();
    ko.applyBindings(vm);
});  

Die zum soeben beschriebenen ViewModel gehörige View findet sich in Listing 5. Dabei fallen die Datenbindungsausdrücke im Drop-down-Feld mit der Beschriftung Zinssatz ins Auge. Das Binding options verweist auf jene Eigenschaft im ViewModel, die die zur Auswahl stehenden Optionen in Form eines observablesArrays beinhaltet. Im betrachteten Fall handelt es sich dabei um ZinsVM-Objekte. Die stellvertretend für diese Objekte anzuzeigende Eigenschaft wird aus dem Binding optionsText entnommen; der intern für die Datenbindung heranzuziehende Wert aus optionsValue. Dieser Wert wird an jene Eigenschaft im ViewModel, die unter value zu finden ist, gebunden. Im betrachteten Fall findet diese Bindung zum Beispiel zwischen der Eigenschaft wert des ausgewählten Objektes und der Eigenschaft zinsSatz im ZinsCalcVM statt.

Sowohl die Angabe von optionsText als auch die Angabe von optionsValue ist optional. Werden diese Bindings weggelassen, wird jeweils das gesamte Objekt herangezogen. Bei optionsText dürfte dies jedoch nur sinnvoll sein, wenn das Array aus Zahlen oder Strings besteht. Darüber hinaus kann eine Beschriftung, die in der ersten Zeile des Drop-down-Feldes anzuzeigen ist, mit optionsCaption definiert werden.

Listing 5

KoSample: ZinsCalc v2

 

Kapital
Zinssatz
Tage
Kest?
Ergebnis

Jene View, die das Warten von Zinssätzen erlaubt, findet sich in Listing 6. Auch diese View ist an ein ZinsCalcVM gebunden. Im oberen Bereich befindet sich eine Tabelle, die das Hinzufügen von neuen Zinssätzen erlaubt. Die beiden Textfelder sind an die Observables newZinsSatz bzw. newZinsSatzAnmerkung gebunden; die Schaltfläche an die zuvor besprochene Funktion addNewZinsSatz. In der zweiten Tabelle werden die einzelnen Zinssätze dargestellt. Dazu wird durch Einsatz eines foreach Bindings der Inhalt des Tags tbody für jeden Zinssatz wiederholt. Mit dem if Binding wird unter Verwendung von mayDelete geprüft, ob der aktuelle Zinssatz gelöscht werden darf. Ist dem so, wird ein Link mit der Bezeichnung LÖSCHEN angezeigt. Dieser ist über ein click Binding an die Funktion deleteZinssatz gekoppelt. Dem Umstand, dass sich diese nicht im gerade dargestellten ZinsVM, sondern im übergeordneten ZinsCalcVM befindet, wird durch Einsatz des Präfixes $parent Rechnung getragen. Informiert die Methode mayDelete darüber, dass der jeweilige Zinssatz nicht gelöscht werden darf, gibt der betrachtete Code eine entsprechende Meldung aus. Dazu wird zusätzlich zum if Binding ein ifnot Binding genutzt.

Listing 6

Zinssätze

 

Neuer Zinssatz:
Anmerkung:

 

Zinssatz Text Anmerkung Aktionen
Löschen Löschen nicht möglich!
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -