Question

I’ve a graph chart like below made using css and knockout.js (binding)

Depending on the value of the data, I need to size the height of the bars by selecting different css classes.

I’ve tried to use the knockout if statement below:

The <!-- ko --> and <!-- /ko --> 

However, this doesn’t meet my requirement as I need something like below:

     <ul data-bind="foreach: ArrayData">
      <!-- ko if: value >= 300 and value <=250 -->
            <li class="height300Css">
        <!-- /ko -->
       <!-- ko if: value >= 200 and value <=300 -->
            <li class="height200Css">
        <!-- /ko -->
    </ul>

Could someone suggest any alternatives?

Thanks.

Answer 1

Add a computed observable to your view model that returns the correct css class, then use the “attr” binding (http://knockoutjs.com/documentation/attr-binding.html).

Or use the “css” binding – but that requires you to have the whole selection logic in the view file.

---

Example code:

var ViewModel = function() {
    var self = this;

    // ....

    self.cssClass = ko.computed(function() {
        var value = self.value();
        if (value >= 300 && value <= 250) {
            return 'height300Css';
        }
        // ...
    };
};

And in the view:

<li data-bind="attr: { class: cssClass }"> 

---

If you’re dealing with an array of objects, you can either add the computed observable to those objects or you can add a normal function to the view model and call it during the foreach loop.

var ViewModel = function() {
    var self = this;

    self.items = ko.observableArray(...);

    self.getCssClass = function(item) {
        var value = item.value();
        // ...
    };
};

And in the view:

<li data-bind="attr: { class: $root.getCssClass($data) }">

Demo: http://jsbin.com/awacew