Knockout sendet keinen aktualisierten Wert

Question

Ich habe eine Knockout-Seite, wo ich die Eingabe mit Regex formatiere. Es macht das Eingabefeld zu einem MM/TT/JJJJ-Format. Wenn also ein Benutzer "1111" eingibt, wird der Eingang vbox so geändert, dass "01/01/2011" angezeigt wird, oder "01111" zeigt "01.01.2011" an.

Das Problem, mit dem ich konfrontiert bin, ist, dass meine beobachtbare nur den vom Benutzer eingegebenen Tastendruck zurückgibt und nicht das vollständig formatierte Element. Zum Beispiel ist die Eingabe, wenn der Benutzer „1111“ ich zurück „1111“ anstelle der „01.01.2011“

Hier ist das HTML-Segment

<input id="inpEventDt" placeholder="MM/DD/YYYY" class="input-small" data-date-blur="true" data-regex="^((\d{0,2})|(\d{1,2}/?\d{0,2})|(\d{1,2}/?\d{1,2}/?\d{0,4}))$" 
         type="text" data-bind="textInput: dateofevent"/> 

Und das ist, wie ich den Knockout habe Bindung

var ViewModel = function (eventdt) { 
var self = this; 
self.dateofevent = ko.observable(eventdt); 
} 

viewModel = new ViewModel(""); 

ko.applyBindings(viewModel); 

Ich versuche herauszufinden, was ich falsch mache.

Answer 1

Ich würde nicht versuchen, die Texteingabe zu formatieren, während der Benutzer tippt, weil es eine schwer verständliche Benutzeroberfläche und nicht intuitive Tipperfahrung macht.

Darüber hinaus ist es komplizierter, weil während der Eingabe die Eingabe wahrscheinlich ungültig ist.

Versuchen Sie stattdessen Ihre Eingabe auf ein Ereignis zu formatieren (verwischen zum Beispiel), während es auf Tastendruck Validierung:

var viewModel = function() { 
 
    var self = this; 
 
    var regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/; 
 
    this.isValid = ko.observable(false); 
 
    this.date = ko.observable(""); 
 
    this.format = function() { 
 
    self.validate(self.date()); 
 
    // TODO: something else 
 
    } 
 
    
 
    this.validate = function(newVal) { 
 
    var matches = newVal.match(regex); 
 
    if (!matches || matches.length != 4) { 
 
     self.isValid(false); 
 
    } else { 
 
     self.isValid(true); 
 
    } 
 
    }; 
 
    
 
    this.date.subscribe(function(newVal) { 
 
    self.validate(newVal); 
 
    }); 
 

 
    this.style = ko.computed(function() { 
 
    return self.isValid() ? "valid" : "invalid"; 
 
    }, this); 
 
}; 
 

 
var vm = new viewModel(); 
 

 
ko.applyBindings(vm);

.invalid { 
 
    border: 1px solid red; 
 
} 
 
.valid { 
 
    border: 1px solid green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<input id="inpEventDt" placeholder="MM/DD/YYYY" class="input-small" data-date-blur="true" type="text" data-bind="textInput: date, event: { blur: format }, css: style" /> 
 
<div data-bind="visible: isValid">OK</div>

Answer 2

Sie sollten versuchen, eine mittels Schreib-/Lese für diese berechnet. Schauen Sie sich die example 3 in der KO-Dokumentation für errechnete Observablen an.

Auch hier ist ein jsfiddle mit moment.js, um mit Datumsformatierung zu helfen.

var ViewModel = function (eventdt) { 
var self = this; 
self.dateofevent = ko.observable(eventdt); 

self.formattedDate = ko.pureComputed({ 
     read: function() { 
      return moment(self.dateofevent()).format("MM/DD/YYYY"); 
     }, 
     write: function (value) { 
      self.dateofevent(moment(value).toDate()); // Write to underlying storage 
     } 
    }); 

} 

viewModel = new ViewModel(new Date("03/25/2015")); 

ko.applyBindings(viewModel);