Jade は簡潔な構文で気に入っていますが、基本的な Knockout バインディングを実行すると、見苦しくなります。
section
h2.page-title(data-bind='text: title')
div(data-bind='foreach: customers')
.well
address
| ID: // there is a space at the end of this line
span(data-bind='text: id')
div(data-bind='text: name')
div(data-bind='text: address.street')
span(data-bind='text: address.city')
| , // there is a space at the end of this line
span(data-bind='text: address.state')
| // there is a space at the end of this line
span(data-bind='text: address.zip')
これについては、いくつかのことが単純に厄介です。まず第一に、すべてのタグdivとspanタグがぶら下がっdata-bindている必要があるため、単一の行としてレンダリングされるものの多くの複数行の表現が強制されるようです。これは、Knockout と組み合わせることで Jade が悪化する一般的な問題です。
さらに、次のように行を分割する必要があるときによく遭遇するケースが 3 つあります。インライン要素の間隔を空けるために行末にスペースが必要です (コード内のコメントでマークされています)。このようなコメントをコードに追加しない限り、エディターではスペースのない行と同じように見えます。それらを誤って削除したり、あるべき場所に置くことを覚えていたかどうかわからなかったりするのは簡単です.
ここにHTMLがあります：
<section>
<h2 data-bind="text: title" class="page-title"></h2>
<div data-bind="foreach: customers">
<div class="well">
<address>
ID: <span data-bind="text: id"></span>
<div data-bind="text: name"></div>
<div data-bind="text: address.street"></div>
<span data-bind="text: address.city"></span>, <span data-bind="text: address.state"></span>
<span data-bind="text: address.zip"></span>
</address>
</div>
</div>
</section>
入力するのは面倒ですが、HTML の方がはるかに読みやすいです。私はジェイドをあきらめようとしています（少なくともノックアウトが多いコンテキストでは）が、より良いジェイドフーを持つ誰かがこの一見一般的なユースケースの可読性を改善できることを願っています. また、データを変更して事前にフォーマットされたIDまたは都市/州/郵便番号の文字列などを含めることはオプションではないため、純粋なJadeの変更で改善できることを願っています.