css - 在伪 css 选择器上将 content css 属性的文本与 knockoutJS 绑定

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/