JavaScript の avalon バインディング プロパティの概要

avalon は、すべてのフロントエンド コードを 2 つの部分に完全に分割するフロントエンド MVVM フレームワークです。ビューの処理はバインディングを通じて実装され (Angular には命令と呼ばれるよりクールな用語があります)、ビジネス ロジックは VM と呼ばれるオブジェクトに集中しています。 VM のデータを操作している限り、データは自動的に魔法のようにビューに同期されます。

$model ($attributes 以外のすべて)、$event (イベント オブジェクト)

1. スコープの制限

ms-controller: 近接性の原則に従って DOM ツリーを下から上にスキャンします

ms- important:これのみをスキャン ノード以下をスキャン領域として使用します

ms-skip: バインディングを無効化します

2. ms-duplex 双方向バインディング属性: データを DOM にバインド (VM がデータを V に同期) することに加えてノードにデータを密かに追加します。リッスン イベントをノードにバインドし、ノードのデータが変更されたら、V 内のデータを時間内に VM に同期します

(1) text、password、textarea にはバインディング値が必要です文字列 (ms-duplex-text) にする

(2)radio: ブール値 (ms-duplex-boolean) にバインドする

(3)checkbox: 配列 (ms-duplex-string) にバインドする

(4)select : 文字列または配列 (ms-duplex-string) にバインドされます

の後に ms-duplex2.0 バインディング属性

3 が続きます。 ms-visible: toggle と同様に、式は true として表示され、表示または非表示になります。表示をブロックまたはなしに設定する

4. ms-ifの挿入と削除処理: ノード要素を表示要素に追加し、2591ae4c846d4a71180fc085121ece31 ノードを非表示にする(ノードを削除する)ように設定します

5. データキャッシュ ms-data-*、オブジェクトまたは配列を保存 ms-data を使用（属性としてではなく DOM ノード オブジェクトにバインド）、ノード上に保存、表示時に処理して返す、data-* としてバインド属性

6. 属性操作 ms-class (クラス)、ms-duplex(value)、ms-attr、ms-href、ms-src

ブール属性: ms-attr-disabled、ms-attr-readonly、ms -attr-selected,ms-attr-checked

文字列固有属性：ms-attr-id,ms-attr-name,ms-attr-title,ms-src,ms-href

カスタム属性：ms-attr-データ URL、ms-attr-data-id

ms-class: ms-class='active' ms-class='active:isOk'
ms-active、ms-hover

7、ms-duplex2。 0

ms-duplex-string,ms-duplex-number,ms-duplex-checked,ms-duplex-boolean,ms-data-duplex

補助 data-duplex-focus 、data-duplex-changed、data-duplex-event

8. スタイル操作: ms-css (インライン)、ms-class (外部導入)

<button ms-click="toggle" ms-css-width="100">显示</button> <span ms-if="flag">{{message}}</span>

9. イベント バインディング: ms-on -eventName、ms-eventName

ms-mouseenter、ms-mouseleave (選択された要素にのみ適用)、ms-input (ms-on-input)、のバインド順序複数のイベントは自然数とは関係ありませんが、イベントの順序に関係します

10. ループ操作

m​​s-each-traverse一時変数(親要素にバインド)

ms-repeat-traverse一時変数(子要素にバインド)

ms-with-traverse 一時変数 (親要素にバインド)

配列: el デフォルトの一時変数、$index 現在の要素のインデックス、$first が最初の要素のブール値であるかどうか、$最後に、$remove は現在の要素を削除する関数を返します。 $outer 内層 ループ外ループ変数

ハッシュ (オブジェクト): $key キー名、$val キー値、$outer ($outer.$index)

<ul> <li ms-repeat-e="data">{{e}}</li> </ul> <ul ms-each-e="data"> <li>{{e}}</li> </ul>

オブジェクトのキー値を変更します:

オブジェクトのキー値を変更します キーと値のペア:

配列の値を変更します: array object.set(subscript, value)

オブジェクトの値を変更します配列内: 配列 object[subscript].Key name = キー値;

Traversal コールバック関数 (属性)

data-each-rendered

data-with-rendered

data-repeat-rendered

data-with -sorted

ループする場合、長さではなくサイズを使用してデータの長さを計算します。ms-ifはms-repeatの実行より優先されるため、ms-ifの代わりにms-if-loopを使用します

11。プロパティ監視

13. モジュール通信

フロントエンド開発でavalonJSを使用したavalonスコープの区切方法

を紹介します データバインディングスコープを区切る必要がある場合、3つの方法があります:

(1) ms-controller : このバインディング属性は、近接性の原則に従ってスコープを示します。最初にこのタグからオンライン検索を開始します

(2) ms-重要: このバインディング属性は、vm バインディング データが見つからない場合にのみ検索します。そのままページ上に出力されます

(3) ms-skip: このバインディング属性の機能は、データバインディングを無効にすることです。つまり、スコープ内にバインドされたデータがあるかどうかに関係なく、補間式がそのまま出力されます。見つかるかどうか