Knockout geschachteltes Ansichtsmodell

Bin ich stecken mit dem, was muss eine einfache Lösung. Ich bin mit knockout.js mit geschachtelten Modelle ansehen, und alles scheint in Ordnung, außer dass meine entfernen-Funktion nicht richtig funktioniert. Es scheint verbindlich zu sein richtig, aber es wird nicht ausgelöst, wenn ich auf "entfernen".

Warum geschachtelte Modelle anzeigen? Lange Geschichte, aber im wesentlichen eine Menge Sachen, die erforderlich ist, um auf einer Seite!

So, hier ist der code:

HTML

<section class="mini-form-container">
    <form data-bind="submit: repeatGuest.addDate">
        <input type="date" data-bind="value: repeatGuest.previousStay"/>
        <button type="submit" class="button-secondary ">Add date</button>
    </form>
    <div data-bind="foreach: repeatGuest.dates, visible: repeatGuest.dates().length > 0">
        <div>
            <input data-bind="value: date" disabled="disabled"  />
            <a data-bind="click: $parent.removeDate">Remove</a>
        </div>
    </div>
</section>

<section>
    <div data-bind="text: ko.toJSON($data)"></div>
</section>

Javascript

function RepeatGuest() {
    ///<summary>Child View Model</summary>
    this.dates = ko.observableArray();
    this.previousStay = ko.observable();
}

RepeatGuest.prototype.addDate = function () {
        var self = this.repeatGuest;
        if (self.previousStay()) {
            self.dates.push({
                date: self.previousStay()
            });
        }
    };

RepeatGuest.prototype.removeDate = function (date) {
    this.dates.remove(date);
}

function ViewModel() {
    var self = this;
    self.repeatGuest = new RepeatGuest();
}
ko.applyBindings(new ViewModel());

Und hier ist mein fiddel: http://jsfiddle.net/6Px4M/2/

Also, warum ist nicht meine entfernen-Funktion gefeuert?

Mögliche Frage: ist die geschachtelte Modelle anzeigen den falschen Weg zu nehmen, knockout, es scheint nicht zu viel info auf dieses?

InformationsquelleAutor der Frage Marvin Rounce | 2013-03-01

  1. 23

    Eine der besten Möglichkeiten, um die Arbeit mit einem verschachtelten Modell wie diesem ist die Verwendung der with verbindlich. Sie tun kann:

    <div data-bind="with: repeatGuest">
   ...
</div>

    Nun, der Umfang ist Ihre repeatGuest und Sie binden können, direkt gegen Ihre Eigenschaften.

    Das Problem mit Ihrem remove Funktion bezieht sich auf den Wert der this und wer $parent ist zu dieser Zeit. Funktionen ausgeführt werden, mit einem Wert von this gleich ist, ist der aktuelle Bereich. Wenn Ihr zu entfernen-Funktion gebunden ist, ist der Umfang eines der Objekte in der date array.

    Die in der Regel Weg, dies zu behandeln ist, um sicherzustellen, dass Ihre Funktion gebunden ist, verwenden Sie stets den korrekten Wert this. Dies könnte getan werden, in der Bindung (sehr hässlich) wie:

    <a data-bind="click: $parent.repeatGuest.removeDate.bind($parent.repeatGuest)">Remove</a>

    Eine bessere option ist, es zu binden, die in die view-Modell-in Ihrem RepeatGuest Konstruktor:

    this.removeDate = this.removeDate.bind(this);

    Dies ermöglicht die Implementierung zu Leben, auf dem Prototypen und überschreibt es auf jeden Fall mit einem wrapper, der die Kräfte der korrekte Wert von this. Alternativ, wenn Sie nicht setzen es auf den Prototyp, dann können Sie die var self = this; - Muster und verwenden Sie self in der Prozedur.

    http://jsfiddle.net/cNdJj/

    InformationsquelleAutor der Antwort RP Niemeyer

  2. 4

    Der Bindung nicht auf die Funktion zuzugreifen, die auf dem falschen Vorbild. Du bist die Bindung an das viewModel, nicht auf die RepeatGuest-Objekt jetzt.

    Es funktioniert, wenn Sie es als eine lokale Funktion:

    http://jsfiddle.net/6Px4M/3/

    function ViewModel() {
    var self = this;
    self.repeatGuest = new RepeatGuest();
    self.removeDate = function (date) {
        self.repeatguest.dates.remove(date);
    }
}

    InformationsquelleAutor der Antwort Ben McCormick

Schreibe einen Kommentar