Knockout - Assign a CSS class to an input from the view model

Question

I have a view model that has the observable "yearsOld" which is bound to an html input.

<input type="text" data-bind="value:yearsOld">

    var viewModel = {
      yearsOld: ko.observable("");
    }

Is there any way to add a css class to the input from the viewModel? The reason I'm asking is because I need to add a css class named "positive-integer" to the input bound to yearsOld so that my 3rd party jQuery library will restrict non-numeric input on that bound input field.

Note: I'm aware of the css binding that knockout provides to place on a input field, but that doesn't help me here since the css is not necessarily dynamic. I'm just hoping to be able to put a css class on the input from the viewModel instead of putting it directly on each individual input. Even if this doesn't make sense to you, I'm just curious if it is possible.

Judah Gabriel Himango · Accepted Answer · 2012-12-21 22:48:02Z

2

It certainly is possible, and you'd do it via the css binding. I don't understand why you think the css binding won't work for you.

Here's how I'd do it:

<input data-bind="value: yearsOld, css: { 'positive-integer': positiveIntegersOnly }" />

var viewModel = {
   yearsOld: ko.observable(),
   positiveIntegersOnly: ko.observable(false)
}

To apply the 'positive-integer' class:

viewModel.positiveIntegersOnly(true);

answered Dec 21, 2012 at 22:48

Judah Gabriel Himango

60.2k39 gold badges162 silver badges218 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:56:41Z

At first my answer was no, this is not possible. But after some research I have discovered that it is entirely possible.

Using the wonderful answer from this question here: knockoutjs overriding bindinghandlers you are able to override the behaviour of the value binding, and add the desired behaviour necessary.

var originalInit = ko.bindingHandlers.value.init,
    originalUpdate = ko.bindingHandlers.value.update;

ko.bindingHandlers.value= {
    init: originalInit,
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var $element = $(element);
        var value = ko.utils.unwrapObservable(valueAccessor());
        // only apply to inputs, and if value is a number and is greater than 0
        if ($element.prop("tagName").toLowerCase() == "input" && !isNaN(value) && value > 0) {
            $element.addClass('positive-integer');
        }
        else {
            // otherwise ensure the class is removed
            $element.removeClass('positive-integer');
        }
        // call the original update function
        originalUpdate(element, valueAccessor, allBindingsAccessor, viewModel);
    }
};

This code will run before the regular value: binding code, and update your elements class (jQuery is needed, but only because I am lazy - should be easily converted if necessary).

Full working JS fiddle available here: http://jsfiddle.net/sp3uF/

Ievgen · Accepted Answer · 2012-12-23 09:32:55Z

0

You want the next scenario: user enters some non-numeric and your input changes the style?

Two ways: jQuery and css binding:

//jQuery
var viewModel = {
    hasNonNumeric: function(){//not implemented},
    yearsOld: ko.observable(),
    yearsOld.subscribe(function(newValue) {
        if (this.hasNonNumeric(newValue)) {
            $('input').addClass("positive-integer");
        }
        else {
            $('input').removeClass("positive-integer");
        }
    });
}

//knockout
var viewModel = {
        hasNonNumeric: function() { //not implemented},
        yearsOld: ko.observable(),
        scareUser: ko.computed(function() {
            var result = false;
            if (this.hasNonNumeric(this.yearsOld())) {
                result = true;
            }            
            return result;
        });
    }

<input data-bind="value: yearsOld, css: { 'positive-integer': scareUser}" />

edited Dec 23, 2012 at 9:32

answered Dec 22, 2012 at 20:20

Ievgen

8,0968 gold badges40 silver badges54 bronze badges

3 Comments

Richard Rout Over a year ago

Doing $('input').addClass("positive-integer"); would change ALL input elements on the page to have/not have this class whenever you edit yearsOld to satisfy hasNonNUmeric()

Ievgen Over a year ago

I used it just for example. You can use any selector you need: $('#theinput').

Richard Rout Over a year ago

Ok! Just thought it was worth pointing out so someone doesn't fall into that trap

Collectives™ on Stack Overflow

Knockout - Assign a CSS class to an input from the view model

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related