46

knockout.js では、静的クラスに CSS バインディングを使用できます。

<div data-bind="css: {'translucent ': number() < 10}">static dynamic css classes</div>

ダイナミック

<div data-bind="css: color">static dynamic css classes</div>

http://jsfiddle.net/tT9PK/1/を試して、次のように組み合わせました

css: {color, translucent: number() < 10}

動的クラスcolorと静的クラスをtranslucent同時に取得したいのですが、エラーが発生します。それを行う方法はありますか？

4

9 に答える 9

58

プロパティごとに動的クラスを追加してから、プロパティcssごとに静的クラスを追加できますattr

<div data-bind="attr: { 'class': color }, css: { 'translucent': number() < 10 }">
  static dynamic css classes
</div>

このバインディングに定義済みのクラスを必ず追加してください attr: { 'class': color }

于 2014-02-03T13:29:38.807 に答える
4

正解です...さらに先に進むには、この変更をチェックしてください。

http://jsfiddle.net/Fv27b/2/

ここでは、オプションを組み合わせているだけでなく、独自のバインディングを完全に作成していることがわかります...これにより、このビュー モデルだけでなく、任意のビュー モデルの移植性の高い拡張が実現します。あなたのプロジェクト...だから、これを書く必要があるのは一度だけです！

ko.bindingHandlers.colorAndTrans = {
    update: function(element, valAccessor) {
        var valdata = valAccessor();
        var cssString = valdata.color();
        if (valdata.transValue() < 10) cssString += " translucent";
        element.className = cssString;
    }
}

これを呼び出すには、それを新しいデータ バインド プロパティとして使用するだけで、可能な限り多くの (または少ない) オプションを含めることができます。この特定の条件下では、$data を提供しただけかもしれませんが、再利用可能なオプションが必要な場合は、パラメーターとして必要なデータ型をより具体的にする必要があり、すべてのビュー モデルが同じプロパティを持つとは限りません。

data-bind="colorAndTrans: { color: color, transValue: number }"

これがあなたの質問に答える以上のものであることを願っています!

于 2013-10-08T19:59:47.680 に答える
2

本当に複雑なスタイリングのケースに入る場合は、計算されたプロパティにすべてを蓄積してください。アレックスが述べたように、またはもう少し読みやすくすることができます：

vm.divStyle = ko.computed(function() {
        var styles = [];

        if (vm.isNested()) styles.push('nested');
        if (vm.isTabular()) styles.push('tabular');
        else styles.push('non-tabular');
        if (vm.color()) styles.push(vm.color());

        return styles.join(' ');
});

主な欠点は、ビュー定義の一部をビューモデルに移動していることです。これは、より独立している必要があります。別の方法は、上記のすべてのロジックを単純な js 関数呼び出しとして提供し、ノックアウトに評価させることです。

于 2015-10-14T10:14:47.797 に答える
1

この問題には、計算されたプロパティ名 ( FF>34、Chrome、Safari>7.1の場合)によるより洗練された解決策があります。

<div data-bind="css: { [color]: true,'translucent': number() < 10 }">
    static dynamic css classes
</div>

一方color、文字列値を持つプロパティです。

の値がcolorオブザーバブルの場合、そのオブザーバブルが更新される前にクラス名をクリアする必要があります。これを行わないと、変更のたびに別のクラスが追加され、前のクラスは削除されません。これは手動で簡単に実行できますが、興味のある人のためにエクステンダーを作成しました。

ko.extenders.css = function(target, value) {
  var beforeChange;
  var onChange;

  //add sub-observables to our observable
  target.show = ko.observable(true);

  beforeChange = function(oldValue){
    target.show(false);
  }
  onChange = function(newValue){
    target.show(true);
  }
  target.subscribe(beforeChange, null, "beforeChange");
  target.subscribe(onChange);
  return target;
};

このエクステンダを使用すると、JavaScript コードは次のようになります。

function MyViewModel() {
    this.color = ko.observable("red").extend({ css: true });
    this.number = ko.observable(9)
};

マークアップは次のように単純になります。

<div data-bind="css: { [color()]: color.show(),'translucent': number() < 10 }">
    static dynamic css classes
</div>

この手法を示すコード ペンがあります: http://codepen.io/USIUX/pen/WryGZQ

また、いつの日かカスタム エクステンダーが不要になることを期待して、ノックアウトに関する問題を提出しました: https://github.com/knockout/knockout/issues/1990

于 2016-01-29T21:53:43.187 に答える