2

::aftercss疑似セレクターを使用してスタイリッシュなcss効果を実現するのをよく目にします。例えば:

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

このtwitter-bootstrapクラスcontentプロパティでは、::after要素のテキストを定義します。KnockoutJSとバインドして動的にする方法はありますか?

4

1 に答える 1

6

私はこれに数回似たようなことをしなければなりませんでした、そして私がそれをした方法は次の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/

于 2012-08-28T01:11:22.280 に答える