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

Question

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

.bs-docs-example::after {
内容:“示例”；
position:absolute； ...

在这个 twitter-bootstrap 类中，content 属性定义了::after 元素中的文本。有什么方法可以通过将它与 KnockoutJS 绑定(bind)来使其动态化吗？

Answer 1

我之前不得不做几次类似的事情，我的做法是绑定(bind)到 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/