在伪css选择器上使用knockoutJS绑定内容css属性的文本

Question

我经常看到使用:: after css伪选择器后实现的时尚css效果.例如:

.bs-docs-example::after { content: "Example"; position: absolute; ...

在这个twitter-bootstrap类content属性中定义了:: after元素中的文本.有什么办法可以通过将它与KnockoutJS绑定来实现这种动态吗？

Answer 1

我之前不得不做几次类似的事情,我做的方式是绑定到style元素的文本,如:

<style type='text/css' data-bind="text: exampleAfterStyle"></style>

具有计算的可观察量,如:

var viewModel = {
    name: ko.observable("Bob"),
};

viewModel.exampleAfterStyle = ko.computed(function() {
    return '.example::after { content: "' + viewModel.name() + '"; }';
});

以下是一个示例:http://jsfiddle.net/rniemeyer/hfKPc/