Datum Probleme mit der Formatierung von Knockout und synchronisieren breeze.js entityAspect geändert

Ok, also dies ist nicht die erste, aber ich habe eine harte Zeit, ein Datum. 😉

Ich bin mit der Brise, Knockout. Habe ein Formular, in dem möchte ich zeigen, kurz, Datum.

<input name="start" data-bind="value: start" class="date required" required="required" placeholder="mm/dd/yyyy" style=" width:142px">

ergibt sich eine lange dateTime: Wed Aug 31 2011 20:00:00 GMT-0400 (Eastern Daylight Time).

Erstellen einer Methode zum formatieren der gewünschten kurzen Zeitpunkt erreicht das Ziel der Schaffung einer kurzen Zeitpunkt, aber meine modelContext ist nicht bekannt, ob die Benachrichtigungen ändern. Also mein Objekt nicht teilt der Bildschirm sich ändert. Kann ich eventuell Durcheinander versucht zu informieren und den dataContext auf klicken Sie auf, etc, aber ich bin der Hoffnung, nicht haben, dass bei der Konvertierung verloren gehen.

function positionInitializer(posit) {

    var shortDate = function (date) {
        return date && moment.utc(date).isValid() ? moment.utc(date).format('L') : "";
    };

    posit.start = ko.observable(shortDate(posit.start()));
}

Gibt es keine vernünftigen Beispiele auf, wie dies zu tun?

Ich glaube nicht, dass ich konvertieren, wenn ich meinen Aufruf für die Abfrage b/c erweitere ich die Anzahl der Tabellen in meinem call & du kannst nicht beides tun.

        var query = EntityQuery.from('Positions')
        .where('id', '==', id)
        .expand('Company, Projects')
        .orderBy(orderBy.positions);

Dachte, ich würde sehen, was der hive-mind denkt...

InformationsquelleAutor James Fleming | 2013-06-08

  1. 7

    Gibt es ein paar gute Optionen für die Handhabung von Datums-Formatierung mit Knock-out.

    Beschreibbar Berechnet

    Könnten Sie eine beschreibbare berechnet für Ihre date-Wert und alles tun, Ihre Formatierung und Analyse gibt. Zum Beispiel:

    var myViewModel = function(){
    var self=this;
    self.trueDate = ko.observable(new Date());
    self.formattedDate = ko.computed({
        read: function(){
            return moment(self.trueDate()).format('L');
        },
        write: function(value){
            self.trueDate(moment(value).toDate());
        }
    });
}

<input type="text" data-bind="value: formattedDate" />

    Jeder Zeit die Rückendeckung beobachten "trueDate" ist aktualisiert seine Beobachter informiert zu werden.

    Benutzerdefinierte Bindung

    Ein anderer Ansatz wäre der Aufbau einer eigenen Daten-Bindung an das format der Daten während der Bindung und lassen Sie Ihren Blick Modell einfach.

    var myViewModel = function(){
    var self=this;
    self.trueDate = ko.observable(new Date());
}

ko.bindingHandlers.dateString = {
    init : function(element, valueAccessor) {
        //attach an event handler to our dom element to handle user input
        element.onchange = function(){
            var value = valueAccessor();//get our observable
            //set our observable to the parsed date from the input
            value(moment(element.value).toDate());
        };
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        if (valueUnwrapped) {
             element.value = moment(valueUnwrapped).format('L');
        }
    }
};

    (Bitte beachten Sie, dass die verbindliche code oben ist nicht getestet und überprüft nicht für ungültige Eingaben, etc.)

    Dann verbindlich wäre 

    <input type="text" data-bind="dateString : trueDate" />

    Bevorzuge ich die custom binding-Ansatz, da es leicht wiederverwendet werden für andere Termine und anzeigen von Modellen. Eine benutzerdefinierte Bindung kann auch Lesen Sie andere Bindungen auf das element, so könnten Sie das Datum in das format string konfigurierbar als ein-Bindung eher als hard-Codierung auf "L".

    Ich hoffe, das hilft!

    Wirklich froh, dass ich helfen konnte, James! Mein blog ist in meinem Profil, vielleicht hilft es vermeiden, mehr ko-facepalms zu. Happy coding!
    Ryan. Zuerst von allen, großen Hut. Zweitens, ging ich zu überprüfen, Ihre Website und bekam eine McAffee-Warnung: Wenn wir diese Seite besucht haben, fanden wir es stellte ein oder mehrere riskante Verhaltensweisen. Dachte, Sie wissen sollten.
    Woah, vielen Dank James. Die ich eingereicht habe, die auf meiner Website von McAfee für die erneute überprüfung. In der Zwischenzeit, wenn Sie möchten, um zu umgehen, die Website und melden Sie sich für meine newsletter statt, können Sie das hier tun : ryanrahlf.us7.list-manage.com/...
    Wenn Sie binden Sie den Kalender, um irgendeinen Wert und dann binden Sie es an einem anderen, müssen Sie den onchange-handler in der update-handler.

    InformationsquelleAutor Ryan Rahlf

  2. 1

    @RyanRahlf Ihre Antwort gab mir einige inspiration, so bietet konfigurierbare Formatierung und Datum validation add-ons auf Ihre Lösung.

    Meine situation war ein bisschen anders. Mein date kommen als JSON-string (Ex. 2013-08-02T00:00:00) also ich brauchte zwei Formaten, einer von JSON, dem anderen zu, was angezeigt werden (Benutzer-freundlich)

    ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var formats = allBindingsAccessor().dateFormats || { from: "", to: "" };
        element.onchange = function () {
            var observable = valueAccessor();
            var value = moment(element.value)
            if (value && value.isValid()) {
                //if format is not set then assume observed is a js date
                if (formats.from) {
                    observable(value.format(formats.from));
                }
                else {
                    observable(value.toDate());
                }
            }
            else {
                observable("");
                //ensures element is blank when invalid input is attempted
                if (element.value) element.value = "";
            }
        };
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var formats = allBindingsAccessor().dateFormats || { from: "", to: "MM/DD/YYYY" };
        var observable = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(observable);
        if (valueUnwrapped) {
            element.value = moment(valueUnwrapped).format(formats.to);
        }
        else {
            element.value = "";
        }
    }
};

    verwenden (dateFormats optional mit Standardeinstellungen)

    <input type="text" data-bind="date: trueDate, dateFormats: { from: 'YYYY-MM-DDTHH:mm:ss', to: 'YYYY/MM/DD' }" />

    InformationsquelleAutor hubson bropa

  3. 0

    Wenn Sie bereits mit jQuery datepicker und Sie nicht möchten, fügen Sie eine andere javascript-Bibliothek, die Sie verwenden könnten:

    ko.bindingHandlers.textDate = {
        update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            var value = valueAccessor(),
                allBindings = allBindingsAccessor(),
                valueUnwrapped = ko.utils.unwrapObservable(value),
                pattern = allBindings.datePattern || $.datepicker._defaults.dateFormat,
                valueFormatted = $.datepicker.formatDate(pattern, valueUnwrapped);

            $(element).text(valueFormatted);
        }
    };

    Jedoch, es funktioniert nur mit Date-Typen.

    InformationsquelleAutor Daniel Fowler

Schreibe einen Kommentar