2011-10-25 13 views
7

div35の配列のクラスを動的に設定している と出会った面白い小さな問題があります。knockout.js - IE -7 css class Issue

Knockout.jsを使用して、私は 'attr'バインディングを介して使用されるクラスを割り当てています。

これは、(IE-6などの心配はありません)私はIE-7を除いてテストしたすべてのブラウザでうまく機能

私は例では、静的にissue here

を強調jsfiddle例(トップを持っています行は)

+0

私はjsfiddle - http://jsfiddle.net/VVuGh/11/を更新しました - タイトルは今クラスと同じに設定されています。ダイナミックな四角にカーソルを合わせると、タイトルが正しく設定されていることがわかります –

答えて

10

IE7は、あなたがclassName代わりのclass設定する必要があります下1(KOが発生した) IE7で私は最も広いCSSセレクタの色(シルバー)を見ていると一致する必要があります。例えば

、これはIE7 他のブラウザで動作します:http://jsfiddle.net/thirtydot/VVuGh/14/

<div data-bind='attr: { "class": classes, "className": classes }'></div> 

しかし、このIE7の癖のサポートは、理想的には、あなたのHTMLにすべきではありません。このような勧めることができるライブラリについては何も知らないけれど、knockout.jsのほうが良い場所になります。

+0

その回答のおかげでヒット! –

0

テンプレートを生成するとき(つまり、モデルの一部である)にクラス名を特定できない場合は、custom bindingを作成できます。

あなたinit/update方法の内容は、ちょうどvalueAccessorによって返された内容に基づいてelementのクラス名を設定します。簡単な例については、あなたが(jQueryのを使用して)行うことができます:

ko.bindingHandlers.yourBindingName = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     // This will be called when the binding is first applied to an element 
     // Set up any initial state, event handlers, etc. here 

     $(element).addClass(valueAccessor()); 

    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     // This will be called once when the binding is first applied to an element, 
     // and again whenever the associated observable changes value. 
     // Update the DOM element based on the supplied values here. 

    } 
}; 

あなたはノックアウトcss bindingに基づいて結合より複雑なを構築することがあります。