すべてがどのように始まったか、Angularに欠けているもの
まず、直面しなければならない問題と、既存のライブラリでは解決できない問題をリストします。 Angularの例を示しますが、Angular Lightや他の多くのライブラリにも同じことが当てはまります。 さあ行こう...
01）一方向のデータバインディング
これは奇妙ですが、一方向のデータバインディングを実装する方法を理解できませんでした。 私の仕事では、主にYii2フレームワークを使用していますが、最も簡単なタスクは次のとおりです。入力フィールドを生成し、ブロック（div）に関連付けます。 よりシンプルに見えるかもしれませんが、inputaを生成するとき、その値は設定されていますが、angularはこの値を考慮せず、ページが読み込まれると空の「モデル」の値を取ります。
または、「ng-init」ディレクティブ（または、Angular Lightの場合は「al-init」）を使用することもできます。最も単純な場合は、問題は実際に解決されます。 ただし、1つだけあります。動的データ更新コンポーネント（Editableなど）を使用する場合、次のようになります。値を変更して保存します=>バインディングを更新する必要があります=>バインディングを更新すると、「ng-init」関係ありません。 トラブル...
02）モデルビューコントローラー
これで石が飛び立ちますが、htmlページを表示するときにMVCスキームを使用することに反対です。
複雑な構造を持つ大規模および大規模なプロジェクト-はい、1つの要素に複数のタイプが必要なグラフィックの表示に関連するプロジェクト-はい、ただし、最も単純なページを表示するときにこのメカニズムを使用するのはなぜですか？ 結局、結果は次のようになります。要素のhtmlコードは1つの場所にあり、要素を別の場所に表示するためのテンプレートであり、コントローラーは通常、ページ上部のスクリプトのどこかにあります。 その結果、単純な視覚構造ではなく、面倒で不器用なものになります。別のプロジェクトで再利用するために要素をコピーするには、ページ全体をシャベルで操作し、その機能のロジック全体を理解する必要があります。
私の謙虚な意見では、たとえば、ページにクールな時計がある場合、スクリプトやスタイルを含むこの要素のすべてのロジックは1つの場所にあるべきです。 その後、必要に応じて、簡単に選択/コピー/貼り付けできます。そして、他のプロジェクトでも動作します。スクリプトやコントローラーにヨーはありません。
03）動的なコンテンツの読み込み
この問題が、独自のソリューションの開発を開始する決定的な要因になりました。 実際、前の段落は、原則として、松葉杖と不要なコードの山によって解決できます。 しかし、コンテンツをロードした後にリンクを更新すると、すべてが悲しいものになります。
ご存じのとおり、Angularのデータバインディングは、ページが読み込まれたときにのみ行われます。 しかし、コンテンツが動的に生成される場合、またはajaxリクエストを介してロードされる場合、つまり 最初の起動後にバインドする必要がある場合 私たちが発見できた唯一の方法は、$スコープを使用することです。 解決策が見つかったように思えますか？ まったくありません。 実際には、サーバーから来てページにロードされたコンテンツには、データバインディングを必要とする要素が存在する可能性があります（存在するでしょう）。 この場合の対処方法 すべての可能なサイトアルゴリズムを1つの大きなメガコントローラーに押し込まないでください。
または別の例：ロードされたコンテンツにブロックがあり、そのコンテンツもロードされているか、動的に生成されている場合はどうしますか？ 私はAngularで特別というわけではなく、おそらくこれらのタスクを達成する方法があります。 しかし、ほとんどの場合、単純ではなく、非常に面倒です。
RainyJs-インストールとクイックスタート
ライブラリは完全に独立しており、圧縮された形で約7Kbの重量しかありません。
使用するには、 rainy.jsファイルをダウンロードしてページに接続するだけです。
Angularの場合のように、最初のデータバインディングは、ページが読み込まれると自動的に実行されます。 ただし、コンテンツのajax読み込み時にデータバインディングも実行されます。この場合、直接読み込まれたページのフラグメントのみが処理されます。
リンクを「直接」更新するには（たとえば、要素を動的に作成した後）、 rainy（elem）関数を呼び出して、セレクター、dom要素、またはjQueryオブジェクトをパラメーターとして渡すことができます。 パラメータなしでこの関数を呼び出すと、ページ全体でリンクが更新されます。
基本的なデータバインディングディレクティブ
現在、ライブラリには12個のディレクティブしか含まれていないため、非常に簡単に習得できます。
主なディレクティブは「rxname」と「rxdata」です。 最初の要素はソース要素に設定され、変数名を設定します。2番目の要素はレシーバ要素に設定され、データが取得される変数の名前を示します。 複数のソースからデータを受信する必要がある場合、変数名のリストがスペースで区切られてrxdataに配置されます。
使用例を以下に示します。
<label> :</label><br> <input rxname="var01" value="World"><br> Hello, <span rxdata="var01"></span>!
[編集]
表示されるプレフィックスとポストフィックス
多くの場合、ウェブマスターは結果の表示をわずかに調整する必要があります（たとえば、「rub」を追加します。入力された金額の接尾辞）。 このフォーマットには、rxviewディレクティブを使用できます。このディレクティブ内では、次のパターンを使用できます（パターンは二重中括弧で記述されています）。
- {{rxname}} -変更されたソース変数の名前
- {{value}} -フォーマットせずに表示される結果の値
- {{var01}} -「var01」という名前の変数の値（複数のソースがある場合に使用）
使用例を以下に示します。
<label> :</label><br> <input rxname="var02" style="width:150px;" type="range"> <div rxdata="var02" rxview=" : {{value}}%"></div>
[編集]
データブロックの表示/非表示
別の一般的なタスクは、チェックボックスまたは何らかの条件でテキストブロックを表示/非表示にすることです。 これらの目的のために、個別のrxshowディレクティブが予約されています。 その値として、変数の名前またはトリガー条件のjsコードのいずれかを配置できます。
使用例を以下に示します。
<input rxname="var03" type="checkbox"> <label> </label><br> <div rxdata="var03" rxshow="value"> . </div>
[編集]
要素でコードを実行する
次に説明するディレクティブはrxcodeです。 データバインディングのより複雑なオプションを対象としており、コンテンツを更新する前にレシーバー要素で実行されるjsコードです。 ここでは、新しい値を返すだけで設定値をオーバーライドするか、 undefinedを返すことで変更を完全にキャンセルできます。
また、このディレクティブは、要素でコードを完全に実行するために使用されます。 たとえば、要素のクラスを変更したり、要素からアクセスできないようにしたりできます。 私は知っている、私は知っている、角度でこれのための個別のディレクティブがあり、属性値を設定するために必要なクラスを変更するだけです。 私もこれについて考えていましたが、最終的には余分なパラメーターを作成しないことに決めました。シンプルさが成功の鍵だからです。
次の変数は、rxcode内で使用できます。
- sender-イベントが発生したdom要素
- rxname-値が変更された変数の名前
- 値 -rxdataで指定された変数の値の配列
- value-配列[値]の最初の変数の値
- self-現在のdom要素（イベントレシーバー）
使用例を以下に示します。
<label> :</label><br /> <input rxname="var05" value="2" type="number"><br> <div rxdata="var05" rxcode=" if(value < 0){ self.classList.add('red'); } else { self.classList.remove('red'); } return ' : ' + (value||0); "></div>
[編集]
Ajaxロード要素のコンテンツ
そして最後に、私たちは最も重要なことに気づきました。実際、そのためにライブラリが作成されました。 また、レシーバーに設定できるディレクティブは2 つのみです： “ rxajax”と“ rxload” 。
[rxajax]では、新しいコンテンツを返すスクリプトへのパスを指定する必要があります。つまり、 リクエストテンプレート。 この要求はGETメソッドを使用して送信され、JSONP形式はデータ転送に使用されます。 クエリテキストでは、rxviewディレクティブと同じワイルドカードパターンを使用できます。
rxloadディレクティブには、要素に新しいコンテンツをロードした後に実行されるjsコードが含まれる場合があります。 このディレクティブは、ajaxをロードするコンテンツだけでなく、他の要素にも使用できることに注意してください。 これは、たとえばjQueryプラグインを使用する場合に非常に役立ちます。これは、ほとんどのプラグインが最初のページのロード時にのみ「要素に接続する」ためです。
「rxajax」の使用例を以下に示します。
<select rxname="var06"> <option disabled=""> ...</option> <option selected="" value="1">Mozilla Firefox</option> <option value="2">Google Chrome</option> <option value="3">Internet Explorer</option> <option value="4">Opera ReMix</option> </select> <div class="bold" rxdata="var06" rxajax="http://x-rainy.org/getajax.php?select=browser&value={{value}}" rxview="..."> </div>
[編集]
さらにいくつかのユースケース
このライブラリは、一方向のデータバインディング用に設計されていますが、双方向のバインディングの編成も特別な問題ではありません。
:<br /> <input rxname="var51a" rxdata="var51b" /><br /> <input rxname="var51b" rxdata="var51a" /><br />
[編集]
「すべて選択」チェックボックスが必要な場合があります。 今ではそれは簡単です：
<input type="checkbox" rxname="var44"> <br /> <input type="checkbox" rxdata="var44"> №1<br /> <input type="checkbox" rxdata="var44"> №2<br /> <input type="checkbox" rxdata="var44"> №3<br />
[編集]
そして、もう1つの興味深い例：価格または数量が変更されると、金額が自動的に再計算され、金額が変更されると、価格が自動的に設定されます。
<div><label>-: </label><input type="number" rxname="m_count" value="0" /></div> <div><label>: </label><input type="number" rxname="m_price" value="0" rxdata="m_count m_summa" rxcode=" if(rxname.toLowerCase() !== 'm_summa')return undefined; return ((values['m_count']||0) != 0) ? (values['m_summa']||0) / values['m_count'] : 0; "/> </div> <div><label>: </label><input type="number" rxname="m_summa" value="0" rxdata="m_count m_price" rxcode="return (values['m_count']||0) * (values['m_price']||0);"/> </div>
[編集]
結論の代わりに
私はプロジェクトを動的に開発するためのサポーターなので、コードを改善するためのヒントや提案を喜んでいます。 念頭に置いておくべき唯一のことは、コストは追加された機能に見合ったものでなければならないということです。 たとえば、IE6をサポートするために多数のコード行を記述することは、ほとんど意味がありません。 潜在的なクライアントがまだそのようなジャンクを使用している場合-これは間違いなく私たちのクライアントではありません。
外部リソースへのリンク
x - rainy.org-ライブラリの公式サイト