how to make observable a css class with knockout js


Tags: javascript,jquery,html,css,knockout.js

Problem :

this is my code:

HTML:

<div>
   <input type="button" id="btnEnable" value="Enable" />
   <input type="button" id="btnDisable" value="Disable" />
</div>
<div id="myDiv">Some Text</div>
<textarea rows="5" id="someText" data-bind="enable: enableText"></textarea>

css:

.enabled{
  background-color: green;
}
.disabled{
  background-color: red;
}

javascript:

$(document).ready(function () {
  $("#myDiv").addClass("enabled").html(" Enabled");

  $("#btnEnable").click(function () {
    $("#myDiv").removeClass("disabled");
    $("#myDiv").addClass("enabled").html(" Enabled");
  });
  $("#btnDisable").click(function () {
    $("#myDiv").addClass("disabled").html(" Disabled");
    $("#myDiv").removeClass("enabled");
  });
  var viewModel = function(){
    enableText =  ko.observable(true)
  }
  ko.applyBindings(viewModel);
});

when i click on the disable button, the enabled css class is removed. At this point, i need to disable the textarea by KO observable viewModel.

var viewModel = function(){
    enableText =  ko.observable(here must return false when the enable css class is removed)
}


Solution :

You need the click, css and text bindings :

$(document).ready(
    var viewModel= function () {
        var self = this;
        self.enableClick = function () {
            self.enable(true);
        };
        self.disableClick = function () {
            self.enable(false);
        };
        // Stores the enable state
        self.enable = ko.observable();
        // Get a text representation of the state 
        self.enableText = ko.computed(function(){
           return self.enable() ? 'Enabled' : 'Disabled';
        });
    };
    ko.applyBindings(new viewModel());
});

The view :

<div>
   <input type="button" data-bind="click: enableClick" value="Enable" />
   <input type="button" data-bind="click: disableClick" value="Disable" />
</div>

<div data-bind="text: enableText, css :{'enabled' : enable,'disabled' : enable() != true }">Some Text</div>
<textarea rows="5" id="someText" data-bind="enable: enable"></textarea>

See fiddle


    CSS Howto..

    How to style webpage with percentages

    How to create a responsive top bar with CSS

    How to configure a child div to display scrollbars only when a parent div percentage settings require it

    How to do isometric 3D in CSS

    How can I add a scrollbar to a DIV that contains a table?

    CSS can't be overwritten, no matter how ; Wordpress with responsive style_options.php

    How can I figure out how much a div shifts when a translate:scale is applied?

    How to remove last TD in first LINE

    CSS: How to add classes to existing grid that allow skipping columns on the left side

    How to make background color extend all the way to bottom of page / content?

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How to show a notification bar on Top after n seconds with transition from top to down?

    How can I create an icon and text in same div like table format

    How can I take just a part of CSS from other site's when using bootstrap?

    How to fade-in and fade-out background-image with CSS transition?

    How to delay the display of the background image in a div

    How Does CSS Opacity Work When Adding Class?

    How to put text on placeholder image

    How can I absolutely position a related image_tag?

    How to force a TD to be a certain height with CSS?

    How to make SVG clip-path work correctly in Google Chrome?

    pure css horizontal accordion: how to have panel open on load

    How to set css via jquery for preventing some action

    How to replace css using jquery after user agent detection

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    How to align image with hr line with another image html CSS?

    How to make the buttons responsive?

    How to tune CSS with Isotope to display top border?

    How to Toggle Switch - Prices and Config? [closed]

    How to position main content below header and footer in css