ms-classの進化

ms-classはavalonで最も多く使われているいくつかのバインドの一つであり、そのためその機能は拡張されている.時期によって、古いスタイルと新しいスタイルの2種類に分けられます.
古いスタイルとは、ms-classの後にクラスの外に付いて、バインド値に式を追加することです.すなわち、ms-class-xxx=「prop」です.xxxはクラス名です.jQuery uiでは、いくつかのクラス名が非常に長いので、ui-widget-contentのように接続して、私たちは直接それを後ろに追加しました.たとえば、次の例です.

<div 
 ms-class-ui-datepicker-week-end="weekend"
 ms-class-ui-state-disabled="disabled"
 ms-class-ui-datepicker-unselectable="selected">{{date}}</div>

古いスタイルは簡単で、使いやすくて、ms-class-の後にクラス名を付けて、=号に式を加えて、その追加の除去を制御すればいいだけです.しかし、欠点も明らかです.

ms-classごとに1つのクラス名しか制御できません.Nつのクラス名が実際に同じバインド属性によって制御されている場合は、別々に書くこともできません.

ms-classの後にはすべて小文字のクラス名しか受け入れられません.HTML仕様では属性名は小文字しか書けないので、大文字にしても小文字に変換されます.

いくつかのクラス名は、動的に生成したいと思っています.

それらに対して、新しいスタイルが作られ、ms-classの後ろに何も書かないか、整数だけをつけて、属性値の左側にクラス名を書いて、真ん中にコロンを書いて、右に式を書きます.
例えば、最初のマルチクラス名制御のニーズは、ms-class=「aaa bbbcc:prop」
2番目の要件は、ms-class=「AAA className:1+2」です.
第3の要件は、ms−class=「aaa width{{w}}height{{h}}:ddd」であり、w=200、h=300、dddがtrueの場合、バインドされた要素ノードに3つのクラス名、aaa、width 200、height 300を追加することである.
複数のms-classを使うなら、新しいスタイルはこのようにすることができます.

<div 
 ms-class="aaa bbb"
 ms-class="ui-state-disabled:disabled"
 ms-class-="ui-state-disabled:disabled"
 ms-class-1="ui-datepicker-ok:test">{{date}}</div>

また、新しいスタイルでは、クラス名が補間式で実現される場合、例えば上のms-class=「aaa width{{w}}height{{h}:ddd」であり、w=200の場合、要素にwidth 200を追加し、その後、wが300になると、前のwidth 200を削除し、width 300を追加し、非常に人間的である.詳しくはこちらを参照