🙌🏽 📚 🎉 knockout.jsで複雑なアプリケーションを作成しています-2 🏬 🦒 👩‍👩‍👧‍👦

私はハブで宣伝したい壮大なメガクラップスを書いていますこれは、分散ソーシャルネットワークのようなものです。いくつかの標準およびフロントエンドで通信するAPIを備えたカーネルがあります。ネットワークの特徴は、フロントエンドがコアと「別々に」存在することです。つまり、ネットワークには独自のドメインがありません。外観はFacebookソーシャルプラグインのように見えます -そこから任意のページにコメントやいいね！を追加できます-fbのようなタグの強力なバインディングのみが使用されますknockout.jsが使用されます +ユーザーはコメントやいいね！ほとんどすべてのアクションを実行します。フロントエンドは、ユーザーが自分のページで使用および追加できるテクノロジーと同じもので書かれています。

その結果、フロントエンドベンダーが関心を持つ可能性のある手法が形成されました。この記事では、この手法を説明したいと思います。

ノックアウトバインダーを介してhtmlページに埋め込まれているシステムについて説明します。コードは、ノックアウトバインディングを持つhtmlテンプレートで構成されるプラグインウィジェットに存在します。ウィジェットは相互にネストできます。これはすべてrequire.jsを使用し、 amd形式で実行されます。外部ページへの依存は最小限に抑えられ、すべてのライブラリ（jquery、knockout、およびプラグイン）は、名前空間を持つローカルスペースで独自のライブラリのみを使用します。コードをビルドするには、 r.jsが使用されます。また、ブートストラップの対話に基づいて、クールな唐辛子として本格的なウィンドウマネージャーを作成します。

デモとソース

私の最初のノックアウト記事-http://habrahabr.ru/post/154003/をご覧になることをお勧めします。そこで始めたアイデアを開発します。

ネットワークのフロントエンドのプロトタイプは、 https：//github.com/Kasheftin/uncrdにあります。

それがすべてどのように見えるか、ここで見ることができます-http ://www.photovision.ru 。意図的にやり直されていない写真のあるサイトがあります。 1つのスクリプトは、ネットワーク機能を提供するuncrd.comドメインから接続されています。写真をクリックすると、写真ビューアーのウィンドウがポップアップします。作成者のプロファイルに移動して、写真やコメントを登録、投稿できます。私の目標は、最低限の機能を備えた標準的なネットワークを作成することでした。

リポジトリには、ネットワークの操作に関するドキュメントも含まれています。ほとんどのブロックがリストされ、そのパラメーターが説明されています-http://uncrd.com/docs/1.html

フロントエンドは、ユニバーサルコアとネットワーク固有のウィジェットで構成されていることに注意してください。作成者の写真とプロフィールの表示は2番目に、ウィンドウマネージャーとウィジェット接続メカニズムは1番目に属します。基礎を検討しますが、一度に開発されるため（システムの特定の場所にあるべきですが、許可はカーネル内にあるため）、システムコードからはあまり分離されていません。コアであり、いくつかのデモウィジェットを詳細に分析します。

短所とCSS

ソーシャルネットワークのモジュールが外部サイトに接続されている場合の標準ロジックは、iframeの使用です。外部サイトはセッションをドラッグアウトしないため、これは安全です。外部サイトのcssはiframe内のスタイルに影響しないため、cssは正しいです。このロジックはここでは壊れています。ネットワークコードはサイトページに直接埋め込まれているため、事前定義された正方形のブロックを挿入するだけでなく、より多くの機能を利用できます。セキュリティは、ネットワーク上のサイトとトークンを登録することによって大部分が決定されます。しかし、CSSは解決されていません。任意のcssルールを使用してページに要素を挿入する方法がわからず、すべてを壊すことなく、外観を100％知っている（各タグのすべてのcssプロパティをリストする場合を除く）。したがって、プロトタイプでは、サイトがブートストラップで実行されていると想定しています（ネットワークは、ブートストラップでcssをドラッグしません。これにより、元のサイトの設計が崩れる可能性があります）。

システムコア

フロントエンドは、システムのコアと動的にロードされるウィジェットで構成されます。各ウィジェットは、amdフォーム（例messageForm.js ）の個別のファイルにあるjsオブジェクトと、コード付きのHTMLテンプレート（例messageForm.html ）で構成されています。最近、knockout.jsでモジュラーアプローチを使用したいくつかのアプリケーションを見てきましたが、すべてこの種類のバインディングを使用していました。

ko.bindingHandlers.widget = { update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var widget = ko.utils.unwrapObservable(valueAccessor().data); require([widget.templateName],function(html) { ko.renderTemplate(element,bindingContext.extend({$data:widget}),{html:html},element); if (widget.domInit) widget.domInit(elem,valueAccessor()); }); return { controlsDescendantBindings: true}; }

次に、core.jsまたは任意のウィジェット（相互の添付ファイルをサポートしているため）で、必要なウィジェットのオブジェクトが作成されます。this.w = SomeWidget（）; および<！-koウィジェット：{data：w}-> <！-/ ko->は、テンプレートの適切な場所で呼び出されます。ノックアウトはネイティブで「名前付き」および「内部の名前のない」テンプレートのみをサポートするため、この場合のrenderTemplateメソッドはこの記事の stringTemplateEngineを使用します。

このアプローチの利点はシンプルです。ウィジェットを明示的に作成すると、彼がどこに住んでいるのかがわかり、バインドすると、新しく作成されたオブジェクトのコンテキストでテンプレートが愚かにレンダリングされます。ただし、uncrdでは、プログラミングなしでhtmlからウィジェットを作成できることが必要です。たとえば、次のコードが機能する必要があります。

 ...   ... <!-- uncrd if: user --> , <!-- uncrd text: user.name --><!-- /uncrd --> <!-- uncrd widget: 'userMenu' --><!-- /uncrd --> <!-- /uncrd --> <!-- uncrd ifnot: user --> <!-- uncrd widget: 'loginForm' --><!-- /uncrd --> <!-- /uncrd --> ...   ...

つまり、ウィジェットはウィジェットバインダー内で作成する必要があります。同時に、作成されたオブジェクトへのアクセスに問題があります。モデルコード内では、内部サブウィジェットオブジェクトがいつロードおよび作成され、どこに存在するかはわかりません。したがって、widget-binding内でウィジェットを作成するときは、作成したオブジェクトをchildrenWidgets変数内のその親に登録する必要があります。ウィジェットを削除する場合は、サブツリー全体を再帰的に削除します。これは、結果のバインディングwidgetBinding.jsのかなり膨大なコードによるものです。

ウィンドウマネージャー

ブートストラップポップアップダイアログがどのように見えるかが大好きです。私もそのウィンドウjqueryプラグインを使用しようとしましたが、複数のウィンドウと間違ったスクロールを作成するときにフェードのグリッチが防止されました。嘘をついています。主な障害は、ノックアウトのすべての力が手元にあるという認識であり、彼はjqueryとDOMで忙しかった。ノックアウトがある場合、DOM操作が嫌いです。 uncrdでは、DOMを使用した操作は、特別に割り当てられたdomInitメソッドの2つの場合にのみ見られます。したがって、ウィンドウマネージャーwindowManager.jsは、複数の開いているウィンドウとドラッグアンドドロップをサポートするブートストラップスタイルで記述され、すべてのウィンドウパラメーターは監視可能な変数です。

そこで、1つのエレガントなトリックについて説明します。 windowManagerには、ウィジェットを含むウィンドウを開くためのopenメソッドがあります。開かれたウィンドウ自体もウィジェットであるため、親のwindowWidgetであるchildrenWidgets配列に自身を登録します。 windowManagerを初期化するときに、this.childrenWidgets = ko.observableArray（[]）を明示的に設定するため、ウィジェットバインディングの通常の配列によってオーバーライドされません。ここでのnakoutの便利さは、observableArrayが通常の配列と同じpush、pop、spliceメソッドを持っていることです。したがって、ウィジェット内では、バインディングは重要ではなく、通常は配列または監視可能です。開かれた各ウィンドウは、observableArrayに登録されます。これは、後者の変更をサブスクライブできることを意味します。そして今-childrenWidgetsが空でない場合は、サイトのページを暗くして、コンテンツを位置で「釘付け」する必要があります：修正して完成したウィンドウを表示し、そうでない場合はすべてを返します。

modalWindow3.jsモーダルウィンドウ自体は、ブートストラップからのhtml +コンテンツのサイズ、位置、およびドラッグに応じた配置計算であり、超自然的なものではありません。唯一の機能は、内部ウィジェットの名前、タイトル、およびフッターを、監視可能な変数によって定義されるサブウィジェットにすることができ、パラメーターが変更されると、ウィジェットが自動的に再作成されることです。このため、1行を記述する必要はありませんでした。すべては、ウィジェットバインディングのupdateメソッドによって提供されます。

ローディング表示

Ajaxリクエストでの読み込みの指示は、サイトUIのペアリングの1つです。次のフォームを送信するときに「お待ちください」アイコンがポップアップする場所、結果が描画される場所（特にエラーがある場合）、および画面上の残りの要素の処理（入力をブロックする方法と送信フォームでウィンドウを閉じようとする方法）について考える必要があるたびに。次のエンジンは、負荷を示すためにネットワークエンジンに実装されています。

EventEmitterメソッドは、各ウィジェットのプロトタイプに混在しています。ウィジェットを初期化するとき、特別な変数this.requiresLoading = trueを設定すると、widgetBindingはウィジェットを非同期と見なし、そこからreadyイベントを予期します。ただし、ウィジェットは状態に関係なくすぐにレンダリングされるため、データを準備するまで表示されないように注意する必要があります。通常、単純なウィジェットには変数this.loading = ko.observable（true）があり、テンプレートは次のようになります。

 <!-- uncrd if: loading --> <div class="uncrd-loading-with-icon">...</div> <!-- /uncrd --> <!-- uncrd ifnot: loading --> ...   ... <!-- /uncrd -->

ページにリンクがあり、クリックすると、ユーザープロファイルでモーダルウィンドウを開く必要があるとします。

 <a href="#" data-uncrd="click:open.bind($data,{name:'profile',id:123})">  #123</a>.

クリックすると、モーダルウィンドウが開き（モーダルウィンドウウィジェットの読み込みは必要ありません）、内部にプロファイルデータが表示され、ユーザーデータを要求するときにダウンロードアイコンが表示されます。これは不器用に機能します。ネットワーク内をサーフィンすると、クリックするたびに、ダウンロードアイコンのある同じ空のモーダルウィンドウが毎回表示されることがわかります。これを回避するために、ウィジェットのreadyイベントが使用されます。次のように書くことができます：

 <a href="#" data-uncrd="click:open.bind($data,{name:'profile',id:123,loading:'after'})">  #123</a> <!--   --> <a class="uncrd-loading-after" href="#" data-uncrd="click:open.bind($data,{name:'profile',id:123})">  #123</a>.

そして、クリックされると、非同期内部ウィジェットがreadyイベントを発行するまで、モーダルウィンドウは開きません。代わりに、イベントクリックイベント、event.currentTarget要素があり、loadingプロパティまたはuncss-loading-cssクラスの存在を確認し、currentTarget要素の横に絶対配置の読み込みアイコンを描画します。後とは、要素の後、前-前、上-リンクの中央（写真とアバター内）を意味します。ウィンドウを開く原因となった要素に読み込みアイコンを添付できなかった場合は、ウィンドウを不自然に開きます。後者の場合は、たとえば、ページがリロードされると発生します。初期化時に、location.hashに応じてルーターは対応するウィンドウを開きますが、データのロード中にページ上のどの要素にアイコンを描画するかを知りません。

ライブラリを接続してr.jsでコンパイルする

ネットワークの重要な要件は最大自治であることをもう一度繰り返します。 jqueryやknockoutを含むすべてのライブラリはローカルに存在し、システムのコアからロードされます。そのため、ネイティブのタグと属性の代わりにタグと属性data-uncrd = "..."を使用し、data-bind = "..."を使用するのは無駄です。すべてのコアライブラリとスクリプトは、ベアr.jsを使用して単一のmain.jsファイルにアセンブルされます。ここでの設定はbuild.jsです。しかし、将来的には、土を土台として使用することを皆に勧めます。何らかの理由で、r.jsでは、単一のファイルまたはディレクトリ全体を処理できますが、1つのアクションでカーネルファイルからmain.jsをアセンブルし、その隣にウィジェットのサブディレクトリを配置することはできません。また、main.jsファイルのrequire.config（{...}）を使用してrequire.jsにプロジェクトがある場合、r.jsを使用してビルドするときにこの構成が考慮されないという事実に備える必要があります-すべてのパスはアセンブリ中に指定されるbuild.jsファイルで再指定されます（ノードr.js -o build.js）。

r.js（＃341 ）で名前空間を操作するときにエラーが発生する可能性があります。これは、現時点では、名前空間が正規表現を介してdefineおよびrequire変数に代入されるためです。 knockout.jsライブラリのコードでは、amd環境をチェックする構文がわずかに異なり、名前空間の規則性はそこで機能しません。解決策はまだありません。出力を確認し、常連を追加するか、ライブラリコードを編集する必要があります。

練習して、ウィジェットを書く

demoブランチのリポジトリに、不要なものをすべて投げました。 /demo/1.htmlフォルダーには、これから記述するプリミティブウィジェットを示すファイルがあります。

トップバーのウィジェットから始めましょう。これはダウンロードを必要とせず、単にトップメニューのあるバーを表示します。ウィジェットのロジックはsource / widgets / models / topBar.jsにあり、空です：

 define(function() { var TopBar = function(options) { } return TopBar; });

ウィジェットのhtmlテンプレートは、通常のhtmlタイプであるsource / widgets / templates / topBar.htmlにあります。

 <div class="navbar navbar-fixed-top uncrd-topbar"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">UnCRD</a> <ul class="nav"> <li><a href="#" data-uncrd="click:o('page1')">  </a></li> <li><a href="#" data-uncrd="click:o({name:'page2',param1:'value1',loading:'after'})">   </a></li> <li><a href="#" data-uncrd="click:o({modalWindow:{header:'',content:''}})">   </a></li> </ul> <div class="loginForm" data-uncrd="widget:{name:'loginForm',template:'loginFormInline'}"></div> </div> </div> </div>

TopBarには何も含まれていないという事実にもかかわらず、widgetBindingにはeventEmitterメソッドが混在していることに注意してください。ウィジェットには、1つの要素（内部ウィジェットloginForm）からのthis.childrenWidgets配列があります。また、すべてのウィジェットに共通のメソッドthis.destroy（サブウィジェットツリーを削除）、this.open（ウィンドウを開く）、this.o（this.open.bind（...）を返すthis.openの略）もあります。

複雑なtopBar。初期化中にjquery-slowがうまく行くと仮定します。これを行うには2つの方法があります。カスタムバインディングを記述してテンプレートのルート要素に追加するのがより適切ですが、モデル内でテンプレートのDOMにアクセスできるようにしたい場合があります。これは、ウィジェットオブジェクトを作成し、renderTemplateを適用した後に表示されます。このためにdomInitメソッドが提供されます-指定された場合、renderTemplateの後に呼び出され、パラメーターself（ウィジェット自体）、element（ウィジェットを作成したDOM要素）、firstDomChild（テンプレート内で最初に検出されたnodeType = 1型のDOM要素）を持ちます：

 define(["jquery"],function($) { var TopBar = function(options) { } TopBar.prototype.domInit = function(self,element,firstDomChild) { $(firstDomChild).hide().slideDown(); } return TopBar; });

トップバーの最初のリンクをクリックすると、o（ 'page1'）メソッドが呼び出されます。これは、モーダルウィンドウが開き、その中にモデル/widgets/models/page1.jsとテンプレート/widgets/templates/page1.htmlを持つウィジェットがロードされることを意味します。正式にはmodalWindowウィジェットにpage1が含まれているという事実にもかかわらず、実際にはpage1がメインウィジェットであり、modalWindowは単なるバインディングであるため、page1はthis.modalWindowプロパティでそのウィンドウにアクセスできます。

 define(function() { var Page1 = function(o) { var modalWindow = o.options.modalWindow; if (modalWindow) { modalWindow.width(700); modalWindow.cssPosition("absolute"); this.close = function() { modalWindow.destroy(); //      modalWindow,    modalWindow      } } else { this.close = function() { this.destroy(); } } } return Page1; });

 <div> ...   ... <a href="#" data-uncrd="click:close">    page1</a> </div>

デフォルトでは、モーダルウィンドウの位置は固定です。ウィンドウが開かれると、サイトのコンテンツはフェードdivによって暗くなり、「“打」されます。位置=固定、marginTop = scrollTopが付加されている場合、暗くなったコンテンツはそのまま残り、スクロールは消えます。モーダルウィンドウの位置が絶対で、画面の高さが画面よりも大きい場合、結果のスクロールはコンテンツのシフトではなくウィンドウのシフトを制御します。すべてのウィンドウが閉じられると、元のプロパティがコンテンツに付加されます。この動作は、位置が固定されたダイアログが表示され、その下のコンテンツがスクロールし続けるとき、ブートストラップよりも正しいようです（そして、モーダルウィンドウが画面の高さで突然大きくなると、アタンが発生します）。

非同期ロードに移りましょう。 page2が表示する前にデータを読み込む必要があるようにします。 this.requiresLoadingを配置し、readyイベントを発行します。アンロードされたデータを使用してウィジェットをすぐに表示できることを忘れないでください。

 define(["knockout"],function(ko) { var Page2 = function(o) { this.requiresLoading = true; this.loading = ko.observable(true); this.stringFromServer = ko.observable(null); } Page2.prototype.domInit = function(self,element,firstDomChild) { setTimeout(function() { //     self.stringFromServer("   "); self.loading(false); self.emit("ready"); },1000); } return Page2; });

 <!-- uncrd if: loading --> <div class="uncrd-loading-with-icon">...</div> <!-- /uncrd --> <!-- uncrd ifnot: loading --> <div data-uncrd="text:stringFromServer"></div> <!-- /uncrd -->

このウィジェットをトップバーの横の/demo/1.htmlページに直接貼り付けて、ページをリロードします。ウィジェットには、ダウンロードアイコンを関連付ける場所がないため、すぐに描画され、ダウンロードアイコンが内部に表示されます。ただし、トップメニューのpage2リンクをクリックすると、リンクの横にダウンロードアイコンが表示され、ページのあるモーダルウィンドウが準備完了の状態で表示されます。

モーダルウィンドウのプロパティは内部ウィジェットから設定できますが、優先順位を低くして、openメソッドで直接指定できます。たとえば、内部ウィジェットの名前を指定する必要はまったくありませんが、代わりにコンテンツプロパティを指定します。次に、テキスト付きの通常のモーダルウィンドウが表示されます。

 <a href="#" data-uncrd="click:o({modalWindow:{header:'',content:''}})">    </a>

まとめ

一緒に書かれたシンプルなウィジェット。複雑なウィジェットは、リポジトリhttps://github.com/Kasheftin/uncrdで確認できます。これらは同じ単純なウィジェットであり、ボリュームが大きいだけです。このシステムはプロトタイプレベルで開発中です。ライブサイトでのプロトタイプの動作-こちらをご覧ください： http : //www.photovision.ru http://uncrd.com/docs/1.htmlのすべてのウィジェットとドキュメントの一部を含むデモページを参照してください。ベアコアのデモと3つの愚かなウィジェットのサンプルは、デモブランチからダウンロードできます。すべては既にそこにアセンブルされており（相対パスは保存されています）、ブラウザで/demo/1.htmlを開くだけです。

knockout.jsで複雑なアプリケーションを作成しています-2