在使用Knockout時，有沒有更好的方式來編寫這個Jade？

Question

我愛玉以其簡潔的語法，但做一些基本的淘汰賽結合時，它變得醜陋：

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似乎迫使大量的多行表示呈現爲單行的內容。 Jade通過與Knockout的組合而變得更糟，這是一個常見的問題。另外，我有三種情況，當我不得不像這樣拆分線時，經常會遇到一些情況：在行尾的空格需要用於放入內聯元素（由代碼中的註釋標記）。除非我用這樣的註釋來編寫代碼，否則它們在沒有空格的行的編輯器中看起來沒有什麼不同。意外刪除它們或者根本無法分辨是否記得將它放在應該存在的位置很容易。

這是在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。我接近放棄Jade（至少在Knockout沉重的背景下），但我希望有更好的Jade-fu的人可以提高這個看似普遍的用例的可讀性。我希望可以通過純粹的Jade改動來改善，因爲修改我的數據以包含預格式化的ID或城市/州/郵編字符串等不是一種選擇。

Answer 1

這還遠遠優雅，但使用& NBSP不僅僅是離開尾隨空格更加透明，並擺脫的需要可笑的評論：

section 
    h2.page-title(data-bind='text: title') 
    div(data-bind='foreach: customers') 
    .well 
     address 
     | ID:   
     span(data-bind='text: id') 
     div(data-bind='text: name') 
     div(data-bind='text: address.street') 
     span(data-bind='text: address.city') 
     | ,   
     span(data-bind='text: address.state') 
     |   
     span(data-bind='text: address.zip')