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

时间:2012-08-27 21:23:03

标签: css knockout.js

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

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

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

1 个答案:

答案 0 :(得分:6)

我之前必须做几次与此类似的事情,我这样做的方法是绑定style元素的文本,如:

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

使用计算的observable,如:

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

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

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