::aftercss疑似セレクターを使用してスタイリッシュなcss効果を実現するのをよく目にします。例えば:
.bs-docs-example::after {
content: "Example";
position: absolute; ...
このtwitter-bootstrapクラスcontent
プロパティでは、::after要素のテキストを定義します。KnockoutJSとバインドして動的にする方法はありますか?
::aftercss疑似セレクターを使用してスタイリッシュなcss効果を実現するのをよく目にします。例えば:
.bs-docs-example::after {
content: "Example";
position: absolute; ...
このtwitter-bootstrapクラスcontent
プロパティでは、::after要素のテキストを定義します。KnockoutJSとバインドして動的にする方法はありますか?
私はこれに数回似たようなことをしなければなりませんでした、そして私がそれをした方法は次の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/