Как мне сделать UI-компонент в Rails? - PullRequest
Новая
       12

Как мне сделать UI-компонент в Rails?

2 голосов
/ 04 октября 2011

У меня есть несколько общих UI-компонентов, которые зависят только от контента.Рассмотрим следующий пример: 

.component
    .top
        // a lot of component code

        .the_actual_top_content

        // some more component code
    .bottom
        // component code

        .the_actual_bottom_content

        // and more component code

Интересно, есть ли способ передать блоки содержимого кода haml в функцию, что обернет эти блоки в моем пользовательском интерфейсе?Примерно так: 

= component
    <<
        .the_actual_top_content
    <<
        .the_actual_bottom_content

Или вот так: 

= render :layout => 'component' do
    = content_for :top do
        .the actual_top_content
    = content_for :bottom do
        .the_actualy_bottom_content

1 Ответ

4 голосов
/ 04 октября 2011

Один из способов сделать это - определить вспомогательные функции для ваших компонентов пользовательского интерфейса. Например, создайте этот вспомогательный метод в ApplicationHelper: 

module ApplicationHelper
  def some_helper
    content_tag :div do
      yield
    end
  end
end

А затем в вашем HAML-шаблоне сделайте следующее: 

= some_helper do
  .the_actual_top_content

Это будет отображать: 

<div class="ui">
  <div class="the_actual_top_content"></div>
</div>

Редактировать

Нашли лучшее решение, используйте render :layout:

Вот часть, называемая _ui.html.haml: 

.ui
  = yield

Что называется так: 

= render :layout => 'ui' do
  .the_actual_top_content

Который отобразит тот же HTML, что и выше.

Редактировать 2 Хотя это далеко от идеала, вот способ сделать то, что вы просите:

Вот часть, называемая _ui2.html.haml: 

.ui2
  .topcontent= top
  .bottomcontent= bottom

Что называется так: 

- top = capture do
  .something content on top
- bottom = capture do
  .something content on bottom
= render 'ui2', :top => top, :bottom => bottom

Я пытался разместить блоки capture на линии рендеринга, но это неправильно работает с отступом HAML.

...