javascript - Setting a css property using a normal variable for knockout js -

i want set css property using if condition using normal variable other observables. like:

a.html file:

<span class="label" data-bind="text: isapproved, css: sampleglobalvar == true ? 'label-success' : 'label-important'"></span> 

a.js file:

edit:

define('durandal/app'],function(app) {    var = function() {      sampleglobalvar = 'true'     }; } 

i getting error such 'sampleglobalvar' doesnt exist in viewmodel . know observable has used , have other problems observable switching between 'true' , 'false' observables creating problems:

like if use:

sampleglobalvar = ko.observable(""); 

setting :

if(//condition) {  sampleglobalvar(true); } else { sampleglobalvar(false); } 

was not clearing observable , due getting different results.

to summarize possible use normal javascript variable use in css data-bind property?

yes, it's possible. true global (i.e. stuff on window) need scope variable in databinding though.

example:

function rootviewmodel() {      // plain property on "global" (i.e. root) view model:    this.plainprop = true;        // true "global" variable:    window.myglobal = true;  }    ko.applybindings(new rootviewmodel());

.error { background: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>    <p data-bind="css: plainprop === true ? 'error' : 'plain'">root plain prop</p>  <p data-bind="css: window.myglobal === true ? 'error' : 'plain'">global plain prop</p>

you've included function scopes , module loader (requirejs?) in mix in question, long scopings right exact scenario should work analogous example. if have problem that particular bit, suggest asking question, including minimal repro (i.e. more (and syntactically valid) code question has).