在使用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')