Wie erstellt man eine Hilfsmethode in Knockout JS?

Question

<input type="text" id="txtFirstname" data-bind="value:firstName,valueUpdate:'afterkeydown'" /> 
<i data-bind="css:RequiredStyle(firstName)"></i> 

var ViewModel = function() { 
    var self = this; 

    self.firstName = ko.observable("Hello World!"); 

    self.RequiredFieldStyle=function (controlValue) { 
     alert('called'); 
     var hasValue = controlValue().length; 
     if (hasValue > 0) { 
      return "fa fa-check-circle"; 
     } else { 
      return "fa fa-exclamation-circle"; 
     } 
    }; 
}; 

Wie man die Hilfsmethode für die RequiredFieldStyle Funktion in knockout.js schafft?

Answer 1

Wenn Sie diese wiederverwendbar sein müssen, könnten Sie eine verwenden custom binding

In Ihrem Fall so etwas wie dieses

ko.bindingHandlers.checkIcon = { 
 
      init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
 
       $(element).removeClass('fa-check-circle fa-exclamation-circle'); 
 
       var v = ko.utils.unwrapObservable(valueAccessor()); 
 
       $(element).addClass(v.length ? 'fa-check-circle' : 'fa-exclamation-circle'); 
 
      }, 
 
      update: function(element, valueAccessor, allBindings, context, bindingContext) { 
 
       $(element).removeClass('fa-check-circle fa-exclamation-circle'); 
 
       var v = ko.utils.unwrapObservable(valueAccessor()); 
 
       $(element).addClass(v.length ? 'fa-check-circle' : 'fa-exclamation-circle'); 
 
      } 
 
     } 
 
     
 
var vm = { 
 
    firstName:ko.observable('') 
 
} 
 
    
 
ko.applyBindings(vm);

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<input type="text" data-bind="textInput:firstName"/> 
 

 
<span class="fa" data-bind="checkIcon:firstName"></span>

Answer 2

Sie sollten Ihre Eingabe beobachtbar machen und eine weitere beobachtbare Variable definieren, um CSS für Ihr Symbol festzulegen. Sobald die Eingabe geändert wird, wird die CSS-Variable automatisch gesetzt.
Beispiel: http://jsfiddle.net/GSvnh/5102/

var MainViewModel = function() { 
     var self = this; 
     self.firstName = ko.observable("Hello World!"); 
     self.CSS = ko.observable(); 
     self.firstName.subscribe(function(controlValue){ 

     var hasValue = controlValue.length; 
      if (hasValue > 0) { 
       self.CSS("fa fa-check-circle"); 
      } else { 
       self.CSS("fa fa-exclamation-circle"); 
      } 
     }) 

    } 

Ausblick:

<input type="text" id="txtFirstname" data-bind="value:firstName,valueUpdate:'afterkeydown'" /> 
<i data-bind="css:CSS"></i> 

Answer 3

Lassen Sie mich eine Alternative anbieten. Obwohl die Verwendung eines manuellen Abonnements nützlich sein kann, gibt es IMHO elegantere Möglichkeiten, dies in Knockout zu tun. Die grundlegendste ist ein berechnetes beobachtbar:

var MainViewModel = function() { 
 
    var self = this; 
 
    self.firstName = ko.observable(''); 
 
    self.validnessCssClass = ko.computed(function() { 
 
    return !self.firstName() ? 'fa-exclamation-circle' : 'fa-check-circle'; 
 
    }); 
 
} 
 

 
ko.applyBindings(new MainViewModel());

.fa { color: red; font-weight: bold; } 
 
.fa-check-circle:before { content: " "; } 
 
.fa-exclamation-circle:before { content: "!!!"; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<input type="text" data-bind="value: firstName, valueUpdate: 'afterkeydown'" /> 
 
<i class="fa" data-bind="css: validnessCssClass"></i>

Ein zweiter Ansatz verwendet extenders, die das resultierende Code machen viel wie die von knockout-validation aussehen. Heck, verknüpfte Dokumente auch ein Beispiel für eine required Validierung enthalten, lassen Sie mich das hier posten Anzeige wörtlich:

ko.extenders.required = function(target, overrideMessage) { 
    //add some sub-observables to our observable 
    target.hasError = ko.observable(); 
    target.validationMessage = ko.observable(); 

    //define a function to do validation 
    function validate(newValue) { 
     target.hasError(newValue ? false : true); 
     target.validationMessage(newValue ? "" : overrideMessage || "This field is required"); 
    } 

    //initial validation 
    validate(target()); 

    //validate whenever the value changes 
    target.subscribe(validate); 

    //return the original observable 
    return target; 
};