ノックアウト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"; 
     } 
    }; 
}; 

どのようにしてknockout.jsにRequiredFieldStyle機能のためのユーティリティメソッドを作成するのですか？

Answer 1

：ヘック、そのまま広告にも、ここで私がいることを投稿してみましょう、required検証のための例が含まれているドキュメントをリンク

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

は私は選択肢を提供してみましょう。手動購読を使用することは便利ですが、ノックアウトでこれを行うためのより洗練された方法があります。最も基本的なものが計算観測可能である：

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>

第二のアプローチは、結果コードがknockout-validationからそのようにたくさん見えるようになりますextendersを使用しています。あなたが再利用できるようにこれを必要な場合は、あなたのケースでは、このような何かをcustom binding

を使用することができます

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