web-dev-qa-db-ja.com

観測されたモデルプロパティにCSSクラスをバインドするノックアウト

次のように、divs cssクラスをビューモデルのプロパティにバインドします。

<div id="statusIndicator" data-bind="css: selectedPriority">

しかし、これは結果を生成します：

 <div id="statusIndicator" class=" 0 1 2 3">

これはビューモデルです。

myViewModel = {
    selectedPriority: ko.observable('High'),
    Company: ko.observable("Bert"),
    Rows: ko.observableArray([
         new row(),
         new row(),
         new row()
    ]),
    Tabs: ['High', 'Medium', 'Low'],

    selectPriority: function (tab) {
        this.selectedPriority(tab);
    }
};

したがって、このビューモデルを使用するページをロードするとき、divを次のようにしたいとします。

<div id="statusIndicator" class="High">

何が悪いのですか？

knockout.js
31
Dave

この状況では、次のことができます。

<div data-bind="attr: { 'class': selectedPriority}">

このメソッドの唯一の欠点は、クラスをオンまたはオフに切り替えるのではなく、直接クラスを設定することです。そのため、複数のクラスを使用している場合は、selectedPriorityにクラスの完全なリストを含める必要があります。

43
RP Niemeyer

モデルから直接クラスを設定できないようです： http://knockoutjs.com/documentation/css-binding.html

次のようなことはできません：

 <div data-bind="css: { high: selectedPriority() == 1, medium: selectedPriority() == 2}">
6
NickGreen

@Chris Jaynesのコメントで示唆されているように、 Knockout 2.2. はクラス名の設定を簡単にします。

http://blog.stevensanderson.com/2012/10/29/knockout-2-2-0-released/

投稿によると：

また、機能する必要があるといつも思っていたように、一部の機能をより機能させるようにしました。たとえば、CSSバインディングは、プログラムで生成されたCSSクラス名を要素にアタッチできるようになりました（以前は、事前定義されたCSSクラス名の切り替えに制限されていました）。

ブログ投稿には、実際のバインディングを確認するために使用できるjsfiddleも含まれています。 http://jsfiddle.net/qRmfH/light/

彼の例のcssバインディング構文に注意してください、css: chosenTicketCss、これはcssクラス名を返す computed observable です。

<p data-bind="visible: chosenTicket, css: chosenTicketCss">
    Excellent choice! Suits you perfectly.
</p>
4
mg1075