Динамічно змінюючи значок в Twitter Bootstrap 3 - javascript, jquery, css, twitter-bootstrap, knockout.js

Погляньте тут (використовує jquery, knockoutjs, tweeting 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);

Коли я натискаю піктограму відтворення, піктограма зникає. Замість цього піктограма перетвориться на значок паузи. Що не так? Я використовую останню версію Chrome.

Відповіді:

У вас є . перед вашою glyphicon-pause. Видали це

Демо: http://jsfiddle.net/tymeJV/NCuFy/4/

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