css - コンテンツcssプロパティのテキストを疑似cssセレクターのknockoutJSでバインドします

Question

::aftercss疑似セレクターを使用してスタイリッシュな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/