javascript - 在单击时选择列表中的项目并进行 knockout

Question

当我点击一个 li 标签时，我试图改变它的 css 类。

我有这个:

型号:

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

我不明白为什么它不起作用。

Answer 1

这就是你要找的:

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

查看:

<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

希望对你有帮助。