How specify two css classes: from property and conditional class

How specify two css classes: from property and conditional class

Asked on December 22, 2018 in knockout js.
Add Comment


  • 3 Answer(s)

        Use the class binding :

    <div data-bind="class: myClass" >
    

        View model :

    var vm = {
        myClass : ko.observableArray(),
    };
    vm.myClass.push('class1');
    vm.myClass.push('class2');
    

        Using  the class binding with a computed is also possible :

        But if there is no interest in that, Then try this code :

    <div data-bind="attr: { 'class' ( Color() + (SomeBooleanProperty() ? ' my-class' :'')) }">
    
    Answered on December 22, 2018.
    Add Comment

        Try this  classic string formatting for specify 2 css classes :

    <div data-bind="css: Color() + (SomeBooleanProperty ? ' my-class' : '')" >
    

        An example of this concept in action:

    var fullString = ('some' + ' ' + 'strings ') + 'and' + ' ' + 'other strings';
    console.log(fullString);
    

    Answered on December 22, 2018.
    Add Comment

    Do not forget to mention the semicolon,Which will lead to error :

    data-bind="css { selected: isFooSelected }"...
    
    

    A colon is not there after css :

    data-bind="css: { selected: isFooSelected }"...
    
    
    .

    Answered on December 22, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.