little ruby blog

небольшой блог о ruby, rails и разной фигне

Немного о совместных шаблонах

| Comments

Почти каждый из нас когда-либо пробовал писать или писал приложения с динамически обновляемым контентом. Пока схема контента несложная - все достаточно просто и неизбыточно. Но как только оформление и количество контента достигает определенной сложности - начинаются проблемы.

Основная проблема - это поддержка одновременно двух шаблонов отображения (для клиента и для сервера). Чтобы этого избежать, обычно прикручивают шаблонизатор того же рода и на стороне сервера.

Алексей Васильев из RailsWare помог избежать и этой проблемы, причем при помощи сразу двух гемов.

Первый из них называется smt_rails и используется, если вы предпочитаете Mustache в качестве шаблонизатора.

Второй - sht_rails и используется для Handlebars.

Установка

Установку я рассмотрю на примере Handlebars, но вообще она фактически совпадает и для Mustache.

Первым делом в Gemfile мы добавляем следующий код: <div class=’bogus-wrapper’>

<div class=”highlight”><table><tr><td class=”gutter”><pre class=”line-numbers”>1 </pre></td><td class=’code’><pre>gem 'sht_rails', github: "rails/sht_rails"</pre></td></tr></table></div>
</div> Потом запускаем генератор: <div class=’bogus-wrapper’>
<div class=”highlight”><table><tr><td class=”gutter”><pre class=”line-numbers”>1 </pre></td><td class=’code’><pre>rails g sht_rails:install</pre></td></tr></table></div>
</div>

Использование

В директории app/templates создаем наш partial с расширением .template.

Для его рендера из рельсов выполняем следующий код: <div class=’bogus-wrapper’>

<div class=”highlight”><table><tr><td class=”gutter”><pre class=”line-numbers”>1 </pre></td><td class=’code’><pre><%= render 'partial', handlebars: content.as_json %></pre></td></tr></table></div>
</div>

А в JavaScript поступаем следующим образом: <div class=’bogus-wrapper’>

<div class=”highlight”><table><tr><td class=”gutter”><pre class=”line-numbers”>1 2 </pre></td><td class=’code’><pre>var content = ... ; ajax call with json result var rendered = SHT['partial'](content)</pre></td></tr></table></div>
</div>

Пример использования

На пример использования можно посмотреть здесь, а исходники глянуть здесь.

Удачного использования!

Comments