【フロントエンド学習記録】Ember.jsでブログ投稿画面のプレビューをできるようにする

前回はブログ記事をマークダウンで書けるようにする実装を見ていきました。

maimux2x.hatenablog.com

次は記事中の任意の場所に画像を埋め込めるようにする部分を見ていくと書いてたのですが、先にEmber.jsでブログ投稿画面のプレビューをできるようにする部分の実装を見ていきたいと思います。

画像のようにタブがあって、ブログ記事を書く部分とプレビューできる部分を作りました。

Rails のみでプレビューをできるようにする場合、Hotwire で TurboFrames や Stimulus を使って実装する形になると思うのですが、Ember.js ではすでにブログ記事を表示する役割を担っているコンポーネントがあるため、実はそれを再利用すればすぐに実装することができます。

そのため、やったこととしてはブログ投稿画面の hbs ファイルを Bootstrap のナビゲーションコンポーネントとタブJavaScript プラグインを使ってタブを切り替えられるようにして、投稿用のタブに元々あったコードを移して、プレビュー用のタブでブログ記事を表示するための Post コンポーネントを呼び出す対応のみです！

getbootstrap.jp

<!-- web/app/components/post-form.hbs -->

<ul class="nav nav-tabs mb-3" id="postFormTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home" data-bs-toggle="tab" data-bs-target="#home-pane" type="button" role="tab" aria-controls="home-pane" aria-selected="true">Form</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="preview" data-bs-toggle="tab" data-bs-target="#preview-pane" type="button" role="tab" aria-controls="preview-pane" aria-selected="false">Preview</button>
  </li>
</ul>
<div class="tab-content" id="postFormTabContent">
  <div class="tab-pane fade show active" id="home-pane" role="tabpanel" aria-labelledby="form-tab">
    <!-- 元々あった投稿用のフォームの実装 -->
  <div class="tab-pane fade" id="preview-pane" role="tabpanel" aria-labelledby="preview-tab">
    <Post @post={{@post}} /> <!-- Postコンポーネントを呼び出す -->
  </div>
</div>