Select an item in a list on click with knockout

Question

I'm trying to chenge the css class of a li tag when I click on it.

I have this:

Model:

var businessUnitsModel = {
    businessUnitsList: ko.observableArray([
        { siteID: "a", title: "business1" },
        { siteID: "b", title: "business2" }, 
        { siteID: "c", title: "business3" }, 
        { siteID: "d", title: "business4" }]),
    currentSelected: ko.observable(),
    selectItem: function (site) { this.currentSelected(site.siteID); }
}

//overall viewModel
var viewModel = {
    businessUnits: businessUnitsModel,
};

HTML

<ul class="modal-list" data-bind="'foreach': businessUnits.businessUnitsList">
    <li class="filterItem" data-bind="'text': title, 
        css: { 'filterItemSelect': siteID === $parent.currentSelected }, 
        'click': $parent.selectItem">
    </li> 
</ul>

CSS

.filterItemSelect {
    color:#0069ab;
}

and I can't understand why it is not working.

Answer 1

This is what you are looking for :

JS:

var businessUnitsModel = {
    businessUnitsList: ko.observableArray([{
        siteID: "a",
        title: "business1"
    }, {
        siteID: "b",
        title: "business2"
    }, {
        siteID: "c",
        title: "business3"
    }, {
        siteID: "d",
        title: "business4"
    }]),
    currentSelected: ko.observable(),
    selectItem: function (that, site) {
        that.currentSelected(site.siteID);
    }
}

//overall viewModel
var viewModel = {
    businessUnits: businessUnitsModel,
};

ko.applyBindings(viewModel);

View :

<div data-bind="with :businessUnits">
    <ul class="modal-list" data-bind="'foreach': businessUnitsList">
        <li class="filterItem" data-bind="'text': title, 
        css: { 'filterItemSelect': siteID === $parent.currentSelected() },
        'click': function(){$parent.selectItem($parent, $data);}"></li>
    </ul>
</div>

See fiddle

I hope it helps.

Answer 2

You should use currentSelected function value (ie add parentheses) when applying css:

<ul class="modal-list" data-bind="foreach: businessUnitsList">
    <li class="filterItem" data-bind="text: title, 
        css: { 'filterItemSelect': siteID === $parent.currentSelected() }, 
        click: $parent.selectItem">
    </li> 
</ul>

And script:

var businessUnitsModel = function() {
    var self = this;
    self.businessUnitsList = ko.observableArray([
        { siteID: "a", title: "business1" },
        { siteID: "b", title: "business2" }, 
        { siteID: "c", title: "business3" }, 
        { siteID: "d", title: "business4" }]);
    self.currentSelected = ko.observable();
    self.selectItem = function (site) {        
        self.currentSelected(site.siteID);
    }
}

ko.applyBindings(new businessUnitsModel());

Fiddle

---

UPDATE here is update of your markup and view model. You should provide full path to currentSelected() property:

<ul class="modal-list" data-bind="'foreach': businessUnits.businessUnitsList">
    <li class="filterItem" data-bind="'text': title, 
        css: { 'filterItemSelect': 
               siteID === $parent.businessUnits.currentSelected() }, 
        'click': $parent.businessUnits.selectItem">
    </li> 
</ul>

And here is fixed problem with model - inside selectItem function this was equal to item which you clicked. Thus you don't want to use self alias to model, you need to specify its name:

var businessUnitsModel = {
    businessUnitsList: ko.observableArray([
        { siteID: "a", title: "business1" },
        { siteID: "b", title: "business2" }, 
        { siteID: "c", title: "business3" }, 
        { siteID: "d", title: "business4" }]),
    currentSelected: ko.observable(),
    selectItem: function (site) {         
        businessUnitsModel.currentSelected(site.siteID); 
    }
}

//overall viewModel
var viewModel = {
    businessUnits: businessUnitsModel,
};

ko.applyBindings(viewModel);

Fiddle