在Twitter Bootstrap 3中动态更改图标

Question

Take a look here (it uses jquery, knockoutjs, twitter bootstrap 3):

http://jsfiddle.net/NCuFy/3/

<i class="glyphicon" data-bind="click: function() { isPaused(!isPaused()) }, css: {'glyphicon-play': isPaused(), '.glyphicon-pause': !isPaused()}"></i>

var viewModel = {
    isPaused: ko.observable(true),
};

ko.applyBindings(viewModel);

When I click on the play icon, the icon disappears. Instead, the icon should turn into pause icon. What is wrong? I use the latest Chrome.

Answer 1

You have a . in front of your glyphicon-pause . Remove it

Demo: http://jsfiddle.net/tymeJV/NCuFy/4/

css: {'glyphicon-play': isPaused(), '.glyphicon-pause': !isPaused()}
                                     ^ I DONT BELONG THERE!!