Как создать полезный метод в нокауте 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"; 
     } 
    }; 
}; 

Как создать метод полезности для RequiredFieldStyle функции в knockout.js?

Answer 1

Если вам это нужно, чтобы быть многоразовым вы могли бы использовать custom binding

В вашем случае что-то вроде этого может работать

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

Вы должны подписаться на свой вход наблюдаемый и определить другую наблюдаемую переменную, чтобы установить CSS вашего значка, а затем всякий раз, когда ввод изменяется, переменная CSS устанавливается автоматически.
Пример: 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"); 
      } 
     }) 

    } 

Вид:

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

Answer 3

Позвольте мне предложить альтернативу. Хотя использование ручной подписки может быть полезно, есть ИМХО более элегантные способы сделать это в Knockout. Самым основным является один вычислен наблюдаемым:

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>

Второй подход использует extenders, что сделает результирующий код выглядеть очень похоже, что с knockout-validation. Heck, связанные документы содержат даже пример для проверки required, позвольте мне опубликовать, что здесь объявление дословно:

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; 
};