3

ERB テンプレートのスタイル設定のベスト プラクティスについて、コミュニティから意見を求めたいと思います。

  • タブ幅 2 を使用します。
  • ソフト タブ (スペース) を使用します。
  • 私は 80 の Word Wrap を使用しています。

ERB テンプレート内の Ruby コードに加えて、すべての HTML タグをインデントします。

これは通常、非常に読みやすい ERB になります。

上記または同様のパラメータを仮定すると、長い行をどのようにインデントしますか?

次の例を検討してください。

<div class="content">
  <div class="row">
    <div class="span10">
      <%= simple_form_for(@user, html: { class: 'form-horizontal' }) do |f| %>
        <%= f.input :MembershipID, label: 'Membership ID :', hint: 'Use the user\'s official Membership ID if they have one. Otherwise, enter their phone number (e.g. 2125551234)', input_html: { value: @user[:MembershipID] } %>
      <% end %>
    </div>
  </div>
</div>

f.input行はかなり見苦しく、読めなくなります。

このようなものが理想的だと思っていましたが、スタイルを大幅に変更する前に、フィードバックを得たかったのです。

<div class="content">
  <div class="row">
    <div class="span10">
      <%= simple_form_for(@user, html: { class: 'form-horizontal' }) do |f| %>
        <%= f.input :MembershipID, 
                label: 'Membership ID :', 
                hint: 'Use the user\'s official Membership ID if they have one. Otherwise, enter their phone number (e.g. 2125551234)', 
                input_html: { value: @user[:MembershipID] } %>
      <% end %>
    </div>
  </div>
</div>

ERB 開始タグ<%=からの二重インデントと、ヘルパー名f.inputからの二重インデントのどちらが優れているかについて、私は行ったり来たりしています。

量ってください！(そして、これを ERB 対 HAML の議論に変えないようにしてください。ERB のみを想定してください!)

ありがとう。

4

2 に答える 2

5

考慮すべきいくつかの事柄：

  • 「span10」クラスと「row」クラスを使用せず、代わりにこれをCSSに適用します
  • ヘルパーを使用します。（現時点で）ヘルパーを再利用する予定がない場合でも、コードがクリーンアップされます。

これにより、次のようになります。

<div class="content">
  <%= simple_form_for(@user) do |f| %>
    <%= membership_input_field %>
  <% end %>
</div>

SCSS：

.content {
  @extend .row;
  #users_form {
    @extend .span10;
    @extend .form-horizontal;
  }
}

現在、これをテストすることはできませんが、一般的な考え方を理解する必要があります。HTMLのスタイルを設定するための、はるかにクリーンで役に立たないクラス。

于 2012-06-23T07:53:27.313 に答える
3

長いまたは複雑なERB拡張の場合、私はしばしば次のように複数行になります。

<div>
  <div>
    <%=
      some_call_with_lots_of_args_or_a_block(
        arg1,
        arg2
      ) do
        block_stuff()
      end
    %>
  </div>
</div>

多くの行がありますが、インデントはすべて、特定の「意味」の値に対して「意味をなす」ようになっています。HTH！

于 2012-06-24T02:46:47.150 に答える