Partial（部分テンプレート）
デフォルトのビューエンジン（ejs）を使用する場合、SailsはPartial（ビューPartial）の使用をサポートしています。Partialは基本的に、他のビュー内から使用するために設計されたビューです。
これらは、異なるビュー、レイアウト、さらには他のPartial間で同じマークアップを再利用する場合に特に役立ちます。
<%- partial('./partials/navbar.ejs') %>
これは、views/partials/navbar.ejsにあるPartialをレンダリングします。これは次のようになります。
<%
/**
* views/partials/navbar.ejs
*
* > Note: This EJS comment won't show up in the ejs served to the browser.
* > So you can be as verbose as you like. Just be careful not to inadvertently
* > type a percent sign followed by a greater-than sign (it'll bust you out of
* > the EJS block).
*
*/%>
<nav class="navbar">
<a href="/">Dashboard</a>
<a href="/inbox">Inbox</a>
</nav>
partial()の最初の引数として渡すターゲットパスは、呼び出し元となるビュー、レイアウト、またはPartialからの相対パスである必要があります。そのため、views/pages/dashboard/user-profile.ejsにあるビューファイル内からpartial()を呼び出し、views/partials/widget.ejsを読み込む場合は、次のように使用します。
<%- partial('../../partials/navbar.ejs') %>
Partialとビューローカル
Partialは、使用される場所で使用可能なビューローカルを自動的に継承します。たとえば、currentUserという名前の変数が使用可能なビュー内でpartial()を呼び出すと、currentUserはPartialでも使用可能になります。
<%
/**
* views/partials/navbar.ejs
*
* The navbar at the top of the page.
*
* @needs {Dictionary} currentUser
* @property {Boolean} isLoggedIn
* @property {String} username
*/%>
<nav class="navbar">
<div class="links">
<a href="/">Dashboard</a>
<a href="/inbox">Inbox</a>
</div>
<span class="login-or-signup"><%
// If the user accessing this page is logged in...
if (currentUser.isLoggedIn) {
%>
You are signed in as <a href="/<%= currentUser.username %>"><%= currentUser.username %></a>.
<%
}
// Otherwise the user accessing this page must be a visitor:
else {
%>
<a href="/login">Log in</a>
<%
}
%>
</span>
</nav>
Partialでのローカルのオーバーライド
ビューローカルの自動継承は、Partialのほとんどのユースケースに対応していますが、追加の動的なデータを渡したい場合があります。たとえば、アプリに次のコードの複製がいくつかの異なるビューにあるとします。
<%
// A list representing the currently-logged in user's inbox.
%><ul class="message-list"><%
// Display each message, with a button to delete it.
_.each(messages, function (message) {
%><li class="inbox-message" data-id="<%= message.id %>">
<a href="/messages/<%= message.id %>"><%= message.subject %></a>
<button class="fa fa-trash" is="delete-btn"></button>
</li><% });
%></ul>
これをリファクタリングするには、コードの重複を避けるために<li>をPartialに抽出できます。しかし、そうすると、自動継承に頼ることができません。Partialは、全体として呼び出されるビュー、Partial、またはレイアウトで使用可能なローカルのみを継承しますが、この<li>はmessageという変数に依存しており、これは_.each()の呼び出しからのものです。
幸いなことに、Sailsでは、partial()の2番目の引数として、オーバーライドのオプションの辞書（プレーンなJavaScriptオブジェクト）を渡すこともできます。
<%- partial(relPathToPartial, optionalOverrides) %>
これらのオーバーライドは、Partial内でローカル変数としてアクセスでき、同じ変数名を持つ自動的に継承されたローカルよりも優先されます。
上記の例を、これを利用するようにリファクタリングしたものがこちらです。
<%
// A list representing the currently-logged in user's inbox.
%><ul class="message-list"><%
// Display each message, with a button to delete it.
_.each(messages, function (message) { %>
<%- partial ('../partials/inbox-message.ejs', { message: message }) %>
<% });
%></ul>
最後に、個々の受信トレイメッセージを表す新しいPartialを次に示します。
/**
* views/partials/inbox-message.ejs
*
* An individual inbox message.
*
* @needs {Dictionary} message
* @property {Number} id
* @property {String} subject
*
*/%>
<li class="inbox-message" data-id="<%= message.id %>">
<a href="/messages/<%= message.id %>"><%= message.subject %></a>
<button class="fa fa-trash" is="delete-btn" aria-label="Delete"></button>
</li>
備考
- Partialは同期的にレンダリングされるため、読み込みが完了するまで、Sailsはより多くのリクエストの処理をブロックします。特に多数の接続が予想される場合は、アプリを開発する際に考慮すべき点です。
- SailsにおけるPartialの組み込みサポートは、デフォルトのビューエンジンである
ejsのみです。Sailsのインストールをカスタマイズしてejs以外のビューエンジンを使用することにした場合、Partial（「ブロック」、「インクルード」などと呼ばれることもあります）のサポートが含まれているかどうか、および使用方法が異なることに注意してください。構文と規則の詳細については、選択したビューエンジンのドキュメントを参照してください。
sailsjs.comでより良いエクスペリエンスを得るには、ブラウザをアップデートしてください。
概念
愛情を込めて制作
Sailsフレームワークは、貢献者の助けを借りて、テキサス州オースティンのウェブ＆モバイルショップによって構築されました。私たちは2012年にNode.jsプロジェクトを支援するためにSailsを作成しました。当然のことながら、オープンソース化しました。皆様の生活を少しでも楽にできれば幸いです！
© 2012-2024 The Sails Company。
Sailsフレームワークは、MITライセンスの下で無料でオープンソースです。
イラストレーション by Edamame。