「ダービーのない日ではない」というルーブリックを続けます。 今日は（最後に！）コードを記述し、Derby.jsの基本的なポイントを検討します。 また、Derbyプログラマーが通常孤独である一方、他のフレームワークを使用しているより幸せな同僚が、楽しくフレンドリーなチームで、より長い期限で同様のプロジェクトに取り組んでいる理由も学びます。
環境の設定方法については、 こちらをご覧ください 。
アプリケーションレイアウトを作成して実行することから始めましょう。
derby bare habr cd habr npm start
ブラウザにhttp：// localhost：3000 /と入力します。
裸の碑文が見えます。
どうしたの？ リクエストはサーバーに送信され、/ lib / server / index.jsから次の接続ミドルウェアによって順番に処理されます。
.use(app.router())
アプリクライアントアプリケーションのルーターは何ですか。/lib/app/index.jsの形式は次のとおりです。
app.get('/', function(page) { page.render(); });
ここでは、パス「/」に対して、テンプレート/views/app/index.htmlからhtmlを生成します。 index.htmlを正確に使用する理由 これはデフォルトです。 あなたはこのように書くことができます、何も変わりません：
app.get('/', function(page) { page.render('index'); });
index.htmlには、Bodyセクションのみがあります。 また、ヘッド、ヘッダー、フッター、スクリプト、タイトルなどがあります。 Derbyテンプレートエンジンは、htmlを収集すると、Bodyセクションを見つけてその値を適切な場所に配置し、他のセクション（設定されていないため）の代わりに空またはデフォルト値を配置します。 その結果、クライアントは次の場所に戻ります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style id="$_css"></style> </head> <!--$_page--> <body> Bare <!--$$_page--> <script defer="" async="" src="/derby/lib-app-index.js"></script> </body> </html>
何が見えますか？ タイトル-空。 スタイルはありません。 頭もほとんど空です。 予想通り。 しかし、何かは体にあります。
スタイルがインラインであり、個別のファイルではないのはなぜですか？ ネイトはどこかで、Google検索で働いていたときに一連のテストを行い、ほとんどのインラインスクリプトではスタイルが単一のファイルよりも速く読み込まれるため、/ stylesフォルダーのすべてのスタイルがインラインで読み込まれると書きました。 Headセクションのスタイルにリンクを追加することを妨げるものは何もありません。
スクリプト/derby/lib-app-index.jsは単なるクライアントアプリケーションであり、ロードされるとすぐに接続し、すべてのhtml生成は既にクライアント上にあります。
-これらは、ダービーテンプレートエンジンのサービスタグです。 これらは、htmlとモデル間でデータを動的にリンクするとき、モデルを変更するときに、ページ全体を更新せず、htmlの一部のみを更新することを保証するために使用されます。 この場合、ルーターがトリガーされると、Bodyセクションのみが過負荷になります。他のセクションは遅延しすぎて設定されず、すべてのページで同じであるためです。
テンプレート内のテキスト（およびスタイル）を変更すると、ブラウザーで即座に変更が表示されます。 これは、あらゆる種類の動的データ同期とは関係ありません。 これは開発者の便宜のためです。 htmlとcssを変更すると、自動的にコンパイルされ、クライアントにダウンロードされ、古いものと置き換えられます。 jsを変更すると、アプリケーションは完全に再起動します。
ビューをデータから分離しましょう。 Derbyでこれを行うには2つの方法があります。 コンテキストから始めましょう。 これは、page.render（）の次の引数と、htmlで表示できるデータを使用して追加できるオブジェクトです。
app.get('/', function(page) { page.render({text: 'text from Context'}); });
<Body:> {{text}}
テンプレート内の二重{{}}括弧は、ビューがデータに動的に関連付けられていないことを意味します。 テンプレートエンジンは、データまたはHTMLの変更を監視しません。 コンテキストは単純なjsオブジェクトであり、これに関連して変更されないため、これはコンテキストには必要ありません。データ（コンテキスト）を出力するこのメソッドの使用はかなり制限され、おそらくいくつかの静的ページにのみ使用されます。 Modelオブジェクトを使用すると、データを操作するすべての力が発揮されます。
繰り返されないように、モデルについてすでに何かが書かれています。
モデルはどこで入手できますか？ 多くの方法があります（クライアント上にいるかサーバー上にいるかによって異なります）が、ルーターには（ページの後に）2番目の引数があり、これはこの状況で非常に便利です。
app.get('/', function(page, model) { page.render(); });
データを入れましょう：
app.get('/', function(page, model) { model.set('_page.text', 'text in model'); page.render(); });
_page.textは、テキストが置かれるモデル内のパスです。 jsonオブジェクトはそれに対応します。 この場合：
var obj = model.get('_page'); obj === {text: 'text in model'}
下線は、このパスがローカルであることを意味します。 つまり、このモデルにのみ存在します。 また、データベースや他のモデル（他のクライアント上）とは同期しません。 任意のローカルパスを作成できますが、_pageオブジェクトは少し特別です。 ルーターがトリガーされるたびにクリアされるため、このページに関連付けられたデータをルーターに保存すると便利です。
モデルからのデータを見るために、テンプレートを変更します：
<Body:> {{_page.text}}
データとhtmlの間に動的リンクを作成してみましょう。
<Body:> <input type="text" value={_page.text} /> {_page.text}
単一の括弧は、モデルからのデータが動的にHTMLにバインドされることを意味します。 入力の値を変更すると、モデルの値が変更され、入力の横のテキストの値が変更されます。 これが、データとhtml間の双方向リンクの実装方法です。
さて、まだ何も複雑ではないように思えますか？ 3行のコード？ なんとなく真面目でもない？
本当に深刻なことをしましょう！ 次に、クライアントが相互に同期されるWebアプリケーションを作成します。 1つのクライアントでhtmlを変更し、このクライアントのデータが動的に変更され、このデータがサーバーに送信され、そこで競合解決アルゴリズムがトリガーされます。 html 収まりますか？ お気に入り（Derby以前）のフレームワークでこれを書くのにどれくらい時間がかかりますか？ コードの行数は？
app.get('/', function(page, model) { model.subscribe('page.text', function(err) { if (!model.get('page.text')) { model.set('page.text', 'text in model'); } page.render(); }) });
<Body:> <input type="text" value={page.text} /> {page.text}
それだけですか？ o_Oまあ、一般に、はい。 http：// localhost：3000 /をいくつかのブラウザーウィンドウで開き、再生します。
page.textはリモートパスです。 ローカルパスとは異なり、データベースを指します。 この場合、ページコレクションとidテキストを持つオブジェクトを作成します。 実際には、リモートパスは次のようになります。「users.8ddd02f1-b82d-4a9c-9253-fe5b3b86ef41.name」、「customers.8ddd02f1-b82d-4a9c-9253-fe5b3b86ef41.properties.isLead」、「products.8ddd02f1-b82d- 4a9c-9253-fe5b3b86ef41.prices.1.value '。
model.subscribe-これは、パス 'page.text'のデータにクライアントをサブスクライブする方法です。 データベース内のこのデータを変更すると、サーバーはこのデータの新しいバージョンを送信します。
ソース :-)
npm installを実行することを忘れないでください
Derby.jsによる資料