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

如何为RequiredFieldStylein 中的函数创建实用方法knockout.js？

4

3 回答 3

1

您应该订阅您的输入 observable 并定义另一个 observable 变量来设置图标的 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>
于 2016-03-28T18:18:05.080 回答
1

让我提供一个替代方案。虽然使用手动订阅可能很有用，但恕我直言，在 Knockout 中有更优雅的方法来做到这一点。最基本的一个是计算的 observable：

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>

第二种方法使用扩展器，这将使生成的代码看起来很像来自敲除验证的代码。哎呀，链接的文档甚至包含一个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;
};
于 2016-03-28T18:38:44.977 回答
0

如果您需要它可重用，您可以使用自定义绑定

在你的情况下，这样的事情可能会奏效

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>

于 2016-03-28T21:23:12.110 回答