我经常看到使用:: after css伪选择器后实现的时尚css效果。例如:
.bs-docs-example::after {
content: "Example";
position: absolute; ...
在这个twitter-bootstrap类中,content
属性定义了:: after元素中的文本。有什么办法可以通过将它与KnockoutJS绑定来实现这种动态吗?
答案 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() + '"; }';
});