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 test file size on rspec (Rails 4/rspec3)

    How can I convert to a CSS Drop down menu

    How do I give one stylesheet precedence over the other with Rails?

    how to fix the difference in line thickness for a collapsable element

    How do I get CSS table columns to line up?

    How can I make the first letter push itself into the paragraph like a newspaper style

    How to make hyperlink for a background image?

    how to apply the css style only to child

    How to create an infinite easing in and out CSS animation loop?

    How do I align an inner div with the bottom of an outer div?

    How to do the Height of html tag Body on 100% of browser window size?

    How to fix width of DIV that contains floated elements?

    JSP/HTML / JS / CSS - How to create a cancel button in form

    How make a page fit on any screen with any orientation [closed]

    How does Apple position its slideshow inside a fixed-position box?

    How can I disable shrinking/resiziing images in Twitter Bootstrap?

    How do I put several elements on the second row in a div

    moodle: how to change the column size in bootstrap theme 'clean'?

    How to make a css keyframe step animation responsive?

    How can I customise jquery loupe to have a circular lens?

    How to make a background text appear under youtube video?

    why will my border not show?

    make a div fold out to show content

    How to pause or delay animation using JavaScript/jquery

    How to position an element just off the top of the browser viewport using only css?

    Z-index problem with ie7 … working in firefox. Images showing behind other img's

    How to place text over different images with different positions?

    How to create responsive text on top of an image?

    How can I divide a div element's content with CSS selector?

    How to have multiple CSS transitions on an element?