单击时使用挖空选择列表中的项目

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

我希望它有所帮助。

Answer 2

在应用css时应该使用currentSelected函数值（即添加括号）：

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

脚本：

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 这里是标记和视图模型的更新。您应该提供currentSelected()属性的完整路径：

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

此处修复了模型问题 - 内部selectItem函数this等于您单击的项目。因此，您不希望使用self别名进行建模，您需要指定其名称：

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