Question

我喜欢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的需要似乎强制了许多呈现为单行的多行表示。这是一个常见的问题，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（至少在一个淘汰赛的背景下），但我希望有更好的Jade-fu的人可以提高这个看似常见的用例的可读性。我希望通过纯Jade更改可以改进它，因为修改我的数据以包含预先格式化的id或city / state / zip字符串等不是一种选择。

Answer 1

它仍然远非优雅，但使用＆amp; nbsp比仅留下尾随空格更透明，并且摆脱了荒谬评论的需要：

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

使用Knockout时有没有更好的方法来编写这个Jade？

1 个答案: