how to make observable a css class with knockout js

Question

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)
}

Damien · Accepted Answer · 2013-11-09 22:39:59Z

2

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

edited Nov 9, 2013 at 22:39

answered Nov 9, 2013 at 21:57

Damien

8,9873 gold badges34 silver badges43 bronze badges

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

3 Comments

Damien Over a year ago

@pasluc74669,"something else" could you be more specific ?

pasluc74669 Over a year ago

it works fine, but i need something else: i need to enable/disable the textarea, by the knockout modelview, when a css class is removed/added.Is it possible?

Damien Over a year ago

Yes it's possible. In 99% cases it's bad idea, because KO is responsible of changing the UI. I mean you change the viewmodel and KO alter the view.

Collectives™ on Stack Overflow

how to make observable a css class with knockout js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related