Knockout bootstrap ul set active li答案

【问题标题】：Knockout bootstrap ul set active liKnockout bootstrap ul set active li
【发布时间】：2015-08-06 09:04:34
【问题描述】：

我想在单击时将列表项的 CSS 设置为活动状态。我有一个可行的实现，但我还需要从ul 元素中的任何其他li 元素中删除活动类。

<div class="row">
  <ul data-bind="foreach: cats" class="list-group">
     <li class="list-group-item" data-bind="click: catSelected, css: { active: isCatChosen() == true}">
     <span data-bind="text: catName"></span>
     <span class="badge" data-bind="text: catClicks"></span>
     </li>
    </ul>
</div>

<script>
    var CatsViewModel = function() {
            var catList = this;

            catList.cat = ko.observable();

            catList.cats = ko.observableArray([
                    {   'catName' : 'Twins',
                        'catClicks' : ko.observable(0),
                        'catImage' : 'img/funnyCat.jpg',
                        'isCatChosen': ko.observable(false),
                        'catSelected': function() {
                                            this.isCatChosen(true);
                                        } 
                    }, {
                        'catName' : 'Leopard',
                        'catClicks' : ko.observable(0),
                        'catImage' : 'img/leopard.jpg',
                        'isCatChosen': ko.observable(false),
                        'catSelected': function() {
                                            this.isCatChosen(true);
                                        } 
                    },{
                        'catName' : 'Blue Eyes',
                        'catClicks' : ko.observable(0),
                        'catImage' : 'img/blueEyes.jpg',
                        'isCatChosen': ko.observable(false),
                         'catSelected': function() {
                                            this.isCatChosen(true);
                                        } 
                     },{
                        'catName' : 'Mountain Lion',
                        'catClicks' : ko.observable(0),
                        'catImage' : 'img/mountainLion.jpg',
                        'isCatChosen': ko.observable(false),
                         'catSelected': function() {
                                            this.isCatChosen(true);
                                        } 
                     },{
                        'catName' : 'Painted Lion',
                        'catClicks' : ko.observable(0),
                        'catImage' : 'img/paintedlion.jpg',
                        'isCatChosen': ko.observable(false),
                         'catSelected': function() {
                                            this.isCatChosen(true);
                                        } 
                    }
             ]);
        };

        ko.applyBindings(new CatsViewModel());
</script>

【问题讨论】：

标签： css twitter-bootstrap knockout.js

【解决方案1】：

由于您将 active 项目设为独占，您应该在 CatsViewModel 中跟踪该项目。每只单独的猫都不需要知道它是否处于活动状态。

<div class="row">
    <ul data-bind="foreach: cats" class="list-group">
        <li class="list-group-item" data-bind="click: $parent.catSelected,
                                               css: { active: $parent.isCatChosen($data) }">
            <span data-bind="text: catName"></span>
            <span class="badge" data-bind="text: catClicks"></span>
        </li>
    </ul>
</div>

var CatsViewModel = function(cats) {
    var catList = this;
    catList.activeCat = ko.observable();
    catList.cats = ko.observableArray(cats);

    catList.isCatChosen = function (cat) {
        return catList.activeCat() === cat;
    };
    catList.catSelected = function (cat) {
        catList.activeCat(cat);
    };
};

然后您可以删除您添加到每只猫的所有不必要的方法和其他属性。

var cats = [
    {
        'catName' : 'Twins',
        'catClicks' : ko.observable(0),
        'catImage' : 'img/funnyCat.jpg',
    }, {
        'catName' : 'Leopard',
        'catClicks' : ko.observable(0),
        'catImage' : 'img/leopard.jpg',
    },{
        'catName' : 'Blue Eyes',
        'catClicks' : ko.observable(0),
        'catImage' : 'img/blueEyes.jpg',
    },{
        'catName' : 'Mountain Lion',
        'catClicks' : ko.observable(0),
        'catImage' : 'img/mountainLion.jpg',
    },{
        'catName' : 'Painted Lion',
        'catClicks' : ko.observable(0),
        'catImage' : 'img/paintedlion.jpg',
    }
];
ko.applyBindings(new CatsViewModel(cats));

fiddle

【讨论】：

【解决方案2】：

$('.list-group li').click(function(){
    $('list-group li').each(function(){
        $(this).removeClass('active');     
    });
    $(this).addClass('active');     
});

https://jsfiddle.net/h3erdxbL/

【讨论】：