2

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

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

4

2 回答 2

5

这就是你要找的：

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>

见小提琴

我希望它有所帮助。

于 2013-06-27T13:53:06.027 回答
0

应用 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());

小提琴

这里的更新是您的标记和视图模型的更新。您应该提供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);

小提琴

于 2013-06-27T13:55:30.227 回答