Ich habe ein Formular mit vielen Eingaben.
Ich verwende die folgende Syntax in meinem Formular: <!-- ko if: PropertyName --> . Ich verwende diese Anweisung im Formular für bestimmte Felder. Dadurch kann ich Werte ausblenden, die nicht definiert sind (nicht ausblenden, sondern aus DOM entfernen).
Allerdings muss ich sie nicht sofort verstecken. Ich meine, wenn Wert nicht leer war und geladen wurde, dann kann der Benutzer es bearbeiten, und der Benutzer kann es leeren. In diesem Fall verschwindet die Eingabe, ich brauche das nicht.
Können Sie mir vorschlagen, wie ich mein Markup ändern und welche Bindung zu verwenden?
%Vor%Sie können versuchen, mit dem entsprechenden JSFiddle zu spielen.
Es könnte komisch sein, aber ich habe wirklich ein Geschäftsszenario:
Erstellen Sie einfach eine benutzerdefinierte Bindung mit der leeren Methode update . Sie können tun, was Sie wollen, bei der Bindung init beim Laden der Seite (bei Knockout-Bindung gelten, um genauer zu sein).
Arbeitsbeispiel: Ссылка
Lasst uns einen Schritt weiter gehen. Sie haben gefragt, wie Sie IsEmptyOnLoad erstellen können. Sie können dies tun, indem Sie virtuelle Knockout-Elemente und einige nützliche Methoden verwenden. Dh: ko.virtualElements.emptyNode wird alles zwischen den Knockout <!-- ko --> -Tags Ссылка
Arbeitsbeispiel: Ссылка
Ein interessantes Problem, das bisher einige erfinderische Antworten hervorgebracht hat. Es ist ein allgemeiner Trend, dass Menschen eine Phobie haben, Logik in das View-Modell zu bringen. Wie der Name schon sagt, sollte es als Schnittstelle zwischen der Ansicht und dem Modell entworfen werden. Erstens würde ich das View-Modell in etwa so umformulieren;
%Vor%Jetzt kann Ihr HTML einfach sein;
%Vor%Ich habe auch eine Abzweigung des JSFiddle als Referenz zur Verfügung gestellt
UPDATE : Aus Gründen der Einfachheit und der minimalen Wiederholung neu berechnet.
Möchten Sie das zusätzliche Feld einfach deaktivieren, wenn FirstName leer ist? Ich kann nicht sehen, wie das erste Eingabefeld versteckt wird, wie Sie es gerade tun, da es niemandem erlaubt, einen Namen einzugeben, sobald er verschwindet.
Wenn Sie zusätzliche Felder deaktivieren und das erste Feld belassen möchten, können Sie data-bind mit disable verwenden, um Folgendes zu tun und Ihre <!-- ko if: .... --> -Anweisungen zu entfernen:
Siehe aktualisierte Geige: Ссылка
AKTUALISIEREN
Sie können eine Observable einrichten, die aktualisiert wird, sobald Ihr Ansichtsmodell geladen ist: IsPageLoaded , die Sie auf "true" setzen. Ich habe eine Verzögerung in der JS hinzugefügt, so dass das Steuerelement erscheinen sollte, nachdem die letzten Zeilen die Observable aktualisiert haben: m.IsPageLoaded(true); . Möglicherweise müssen Sie dies mit Ihrem Code überprüfen, um zu sehen, ob es funktioniert (ohne setTimeout ).
HTML:
%Vor%JS:
%Vor%Aktualisierte Geige: Ссылка
Sie können normale Variablen (anstelle von Observablen) erstellen, die nur in den "if" -Anweisungen verwendet werden. Auf diese Weise wird die Bedingung innerhalb des "if" nicht aktualisiert, wenn Sie das Feld aktualisieren:
%Vor%und die Bindungen sind:
%Vor%Geige hier: Ссылка Hoffe das hilft
Tags und Links knockout.js javascript jquery