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 add border to galleria big image?

    Jquery slider; made the container transparent, how do I hide the image overflow?

    How to change an image in CSS that has no class?

    How to get the content of the bottom element of a flexbox to be 100% height its container

    How to make the float left and float right on the same line?

    CSS HTML - How to add more outer colour on the drop down menus and more than one word per drop down

    How to select the first paragraph in a div with a specific class (CSS 2)

    How to design this html Box for legacy browsers

    How to use relative/absolute paths in css URLs?

    In html, how is a child element's percentage-based size calculated when its parent has padding?

    How to do isometric 3D in CSS

    How to fix side bar and header using CSS for JS & jQuery Scroller

    How to apply CSS class on current element using jQuery

    How to output different images depend on user screen?

    How to overlap divs in html

    How know CSS version - ASP.NET - VS Community 2013

    how to append an icon to an input search?

    How to use the Xpath and CSS selector in for function

    CSS - How do I float one element to the right inside the other div?

    How to rotate background in CSS?

    CSS question: how to remove the border from an image in WordPress

    How do I loop a css animation with multiple keyframe definitions?

    JQuery - show/hide rows and manipulate css

    How do I create a full-width bar on a web page?

    How insert value from Ruby in CSS file

    How to remove zoom effect of tile(metro ui css) using javascript

    How to “reset” style in view page, set in css file

    How to Overcome Bootstrap's Default Styling? Element targeting issues?

    how to get text beside image button using CSS

    How can I use CSS to vertically center the text in an anchor, within a LI?