1

我喜欢 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（至少在 Knockout-heavy 的情况下），但我希望拥有更好 Jade-fu 的人可以提高这个看似常见的用例的可读性。而且我希望可以通过纯 Jade 更改来改进它，因为修改我的数据以包含预先格式化的 id 或城市/州/zip 字符串等不是一种选择。

4

1 回答 1

1

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

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')
于 2013-12-25T12:41:50.590 回答