web-dev-qa-db-ja.com

Haml構文：行を2行に分割します

私はhtmlテンプレートのRailsプロジェクトでHAMLを使用しています。非常に長い行を分割して数行にすることが可能かどうかを調べたいと思います：

%a.open-service{href: '#', data: {
  service_name: service.description,
  balance_type: "coinsurance",
  total: service.a_total_billed - service.a_rejected - service.a_not_covered, 
  discount: service} }

ご覧のとおり、hrefといくつかのデータ属性を含むアンカーが必要なだけで、1行にするのはきれいなコードではありません。しかし、上記のようにすると、「不均衡なブラケット」というエラーが発生します。

何か助けはありますか？

ruby-on-railssyntaxhaml
27
benams

Hamlのドキュメント によると、新しい行はコンマの後に配置できます。したがって、おそらく次のようなものが機能します。

%a.open-service{href: '#', 
                data: { service_name: service.description,
                        balance_type: "coinsurance",
                        total: service.a_total_billed - service.a_rejected - service.a_not_covered, 
                        discount: service} }
30
Paul Fioravanti

|の助けを借りてこれを達成できると思います。それについてはhamlのドキュメントで読むことができます ここ 。

8
Mikhail Nikalyukin

カンマの後にいつでも行を区切ることができます。だからあなたがこれを持っていた場合：

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]).filter_by_appliance(params[:appliance]).where('start > ?', Time.now - 1.month).group_by_day(:start, format: '%d').sum(:power), colors: ["#7FC564"], title: 'Últimos 30 dias', library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' }, hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 }, vAxis: { textPosition: 'left', format: '# kWh' } }

まず、すべてのコンマで行を分割して、これに入ることができます。

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]).filter_by_appliance(params[:appliance]).where('start > ?', Time.now - 1.month).group_by_day(:start, format: '%d').sum(:power),
      colors: ["#7FC564"],
      title: 'Últimos 30 dias',
      library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' },
      hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 },
      vAxis: { textPosition: 'left', format: '# kWh' } |

それでも、最初の行は大きすぎます！問題ない。パイプ文字は、複数行の文字列を指定できます。

これは行の終わり（空白の後）に配置され、|で終わる後続のすべての行を意味します。それらが同じ行にあるかのように評価されます。だからあなたは最終的に得るでしょう：

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]) |
      .filter_by_appliance(params[:appliance]) |
      .where('start > ?', Time.now - 1.month) |
      .group_by_day(:start, format: '%d') |
      .sum(:power), |
      colors: ["#7FC456"],
      title: 'Últimos 30 dias',
      library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' },
      hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 },
      vAxis: { textPosition: 'left', format: '# kWh' } |

複数行ブロックの最後の行でさえ、|で終わる必要があることに注意してください。

それが役に立てば幸い！

3
Flavio Wuensche

私はちょうどこの質問に出くわしました、私は同じ問題を抱えていました、しかし選択された答えは私を助けませんでした。だから私はミハイルの答えに基づいているだけです。カンマで区切られていない非常に長い属性がある場合（angularjsのようなものを使用している場合など）、各行の最後に+ |を追加することで、属性を複数の行に分割できます（トリッキーな部分であるこの複数行ブロックの最後の行を含む）。

ちょうどこのような ：

%select{ ng: { model: "my_model_name",
             options: "myitem as myitem.formattedName for myitem in container.item_list() | " + |
                      "without: another_list.item_list()" }}                                    |

これについて読むことができます HAMLドキュメントで 。

2
Pierre-Adrien Buisson

一部の要素には Bootstrap Progress Bar などの多くの属性が必要なため、HAMLのMultilineはRailsコードの追加とはほとんど関係がない場合があります。一行で恐ろしいように見えるだけです。

これは私に頭痛の種を与えていました：

.progress
  .progress-bar.progress-bar-striped.progress-bar-success{ |
                  role: "progressbar",                     |
                  aria: {                                  |
                    valuenow: "#{@percent}",               |
                    valuemin: "0",                         |
                    valuemax: "100",                       |
                  },                                       |
                  style: "width: #{@percent}%;" }          |
    = "#{@percent}%"

そして、これが私の闘争の解決策でした：

.progress
  .progress-bar { class: "progress-bar-striped progress-bar-success",
                  role: "progressbar",
                  aria: { valuenow: "#{@percent}",
                          valuemin: "0",
                          valuemax: "100", 
                  },
                  style: "width: #{@percent}%;" }
    = "#{@percent}%"

パイプバーの行がなくても、前の行がコンマで終わり、角かっこで終わっている行がない限り、

1
Okomikeruko